@extends('front.layouts.app')
@section('content')
<div class="inner-banner" @if(@$metaArr['main_banner_img_type'] == "image") style="background-image: url({!! getCmsFileUrl(@$metaArr['main_banner_img']) !!});" @endif>
    <div class="container h-100">
        <div class="d-flex h-100 align-items-center justify-content-center">
            <div class="col-12">
                <div class="inner-banner-content">
                    <h4>{!! $metaArr['main_banner_subtitle'] ?? "Learn More" !!}</h4>
                    <h1>{!! @$metaArr['main_banner_title'] ?? "Blog" !!}</h1>
                </div>
            </div>
        </div>
    </div>
    @if(@$metaArr['main_banner_img_type'] == "video")
    <video autoplay loop muted playsinline>
        <source src="{!! getCmsFileUrl(@$metaArr['main_banner_img']) !!}" type="video/mp4">
        <source src="{!! getCmsFileUrl(@$metaArr['main_banner_img']) !!}" type="video/ogg">
        Your browser does not support the video tag.
    </video>
    @endif
</div>

<section class="blog-post-sec sec-py">
    <div class="container">
        <div class="row gx-lg-5 flex-row-reverse">
        <div class="col-lg-3">
                <div class="blog-filters">
                    <div class="blog-post-filter mb-4 d-block">
                        <p class="title">Search</p>
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" aria-describedby="post-search" name="search" value="{!! request()->get('search') !!}" id="search">
                            <button class="btn btn-theme-blue" type="button" id="post-search" onclick="javascript:filterBlog()"><i class="bi bi-search"></i></button>
                            <a href="javascript:void(0)" class="btn btn-theme-blue d-flex items-center justify-center d-lg-none" id="post-filter"><i class="bi bi-sliders"></i></a>
                        </div>
                    </div>
                    @if($categories->count())
                    <div class="blog-post-filter mb-4 mo-fillter">
                        <p class="title">Categories</p>
                        <div class="categories-list">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="classTypeAll" @if(request()->has('catids') && request()->catids == "") checked @endif>
                                <label class="form-check-label" for="clsBlogTypeAll">
                                    All
                                </label>
                                <span class="">{!! $all->count() !!}</span>
                            </div>
                            @foreach($categories as $category)
                            <div class="form-check">
                                <input class="form-check-input clsBlogType" type="checkbox" value="{!! $category->id !!}" @if(request()->has('catids') && (in_array($category->id,explode(",",request()->catids)) || request()->catids == "")) checked @endif>
                                <label class="form-check-label" for="class_cat_{!! $category->id !!}">
                                    {!! $category->name !!}
                                </label>
                                <span class="">{!! $category->blogs()->whereHas('blog', function ($q) {
                                    $q->where('is_active',1);
                                })->count() !!}</span>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>
            </div>
            <div class="col-lg-9">
                @if($blogs->total())
                <div class="row">
                    <div class="col-md-12">
                        <div class="grid-list-tab-nav">
                            <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#gridBlogs" type="button" role="tab" aria-controls="gridBlogs" aria-selected="true"><i class="bi bi-grid-fill"></i></button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#listBlogs" type="button" role="tab" aria-controls="listBlogs" aria-selected="false"><i class="bi bi-list-ul"></i></button>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="gridBlogs" role="tabpanel">
                                <div class="row my-blog-card-row">
                                    @foreach($blogs as $blog)
                                    <div class="col-md-6 col-xl-4">
                                        <a href="{!! $blog->page_url !!}" class="blog-post-card" title="{!! $blog->name !!}">
                                            @foreach($blog->categories as $cat)
                                            <!-- <div class="blog-categories-ntn">{!! $cat->category->name ?? "" !!}</div> -->
                                            @endforeach
                                            <div class="blog-post-content">
                                                <div class="blog-post-title">
                                                    {!! $blog->name !!}
                                                </div>
                                                @if($blog->is_author_show)
                                                <p>By <span class="blog-categories-ntn">{!! $blog->authors_name !!}</span></p>
                                                @endif
                                                <div class="blog-info-row">
                                                    <p>{!! $blog->publish_at->format(config('constants.DISPLAY_DATE_FORMAT')) !!}</p>
                                                </div>
                                            </div>
                                            <div class="blog-post-img">
                                                <img src="{!! $blog->image_grid_url !!}" class="w-100" alt="{!! $blog->name !!}">
                                            </div>
                                        </a>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="tab-pane fade" id="listBlogs" role="tabpanel">
                                @foreach($blogs as $blogList)
                                <div class="horizontal-blog-card">
                                    <a href="{!! $blogList->page_url !!}" class="blog-card-img" title="{!! $blogList->name !!}">
                                        <img src="{!! $blogList->image_list_url !!}" alt="{!! $blogList->name !!}">
                                    </a>
                                    <div class="blog-post-content content">
                                        <h4><a href="{!! $blogList->page_url !!}">{!! $blogList->name !!}</a></h4>
                                        <span class="post-date">{!! $blogList->publish_at->format(config('constants.DISPLAY_DATE_FORMAT')) !!}</span>
                                        <p><span>{!! substr(strip_tags($blogList->description),0, 250); !!},</span> <a href="{!! $blogList->page_url !!}" class="rd-more">Read More</a></p>
                                        @if($blogList->is_author_show)
                                        <p class="cat-text">By<span class="blog-categories-ntn">{!! $blogList->authors_name !!}</span></p>
                                        @endif
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pagination justify-content-center mt-5">
                    {!! $blogs->withQueryString()->links() !!}
                </div>
                @else
                <div class="blog-post-card">
                    No blog post found!
                </div>
                @endif
                </div>
            </div>
        </div>
    </div>
</section>
<input type="hidden" id="sto">
<input type="hidden" id="page" value="1">
@endsection
@section('js')
<script>
$(document).on('click', "#post-filter", function () {
    $('.mo-fillter').toggleClass('active');
})
$(document).on('click', "#classTypeAll", function () {
    if ($(this).is(":checked")) {
        $('.clsBlogType').not(this).prop('checked', this.checked);
    } else {
        $('.clsBlogType').prop('checked', false);
    }
    filterBlog();
})

$(document).on('click', ".clsBlogType", function () {
    if (!($(this).is(":checked"))) {
        $('#classTypeAll').prop('checked', this.checked);
    }
    $("#page").val(1);
    filterBlog();
})

$("#sto").val($(".tab-content .active").attr('id'));
$(document).on('click', '.nav-item', function () {
    setTimeout( function(){
        // Do something after 1 second
        $("#sto").val($(".tab-content .active").attr('id'));
    },500);
});

@if(request()->get('sto') <> "")
$(".nav-item").find(`[data-bs-target='#{!! request()->get('sto') !!}']`).trigger('click');
@endif

$(document).on('click', '.page-link', function () {
    var pageno = $(this).attr('data-page');
    $("#page").val(pageno);
    filterBlog();
    return false;
});


function filterBlog() {
    $(".loader").show();
    var url = baseUrl + segments[1]+'?';
    var qstr = "search="+$("#search").val();
    if ($('.clsBlogType:checked').length > 0) {
        var catids = [];
        $('.clsBlogType').each(function () {
            if ($(this).is(':checked')) {
                catids.push($(this).val());
            }
        });
        qstr += "&catids=" + catids.join(',');
        // console.log(catids);
    }
    qstr += '&page='+ $("#page").val() +'&sto='+$("#sto").val();
    window.location.href = url + qstr;
}
</script>
@stop