@extends('front.layout')
@section('title')
{{'Latest News'}}
@endsection
@section('description')
{{'Latest News Homeflo'}}
@endsection
@section('content')
<div id="test">
@if(count($blogCategories)>0)
<section class="page-banner bg-overlay" style="background-image: url({{ asset('/front/images/slider-1.jpg') }});">
    <div class="page-inner-box col-md-4 text-white">
        @if(!empty($banner_title) && isset($banner_title))
        <h3 class="text-center h1">{{$banner_title}}</h3>
        @else
        <h3 class="h3 text-center mb-3">Latest News</h3>
    
        @endif
    </div>
</section>
<section class="py-lg-5 py-3" >
    <div class="container">
         
        <div class="row">
            <div class="col-md-12 text-lg-center mb-4">
                <ul class="blog-categories d-lg-inline-flex">
                    @foreach($blogCategories as $key=>$cat)
                        @if($key==0)
                        <li><a id="blogCat-{{$cat->id}}" class="{{ $active_cat == "all" ? "active" : " " }}" href="{{url('blogs')}}">{{$cat->title}}</a></li>
                        @else
                            <li><a id="blogCat-{{$cat->id}}" class="{{ $active_cat == $cat->key ? "active" : " " }}"  href="{{url('blogs')}}/{{$cat->key}}">{{$cat->title}}</a></li>
                        @endif
                    @endforeach
                  
                </ul>
            </div>
        </div>
        <div class="row text-center">
           
            
            @if(!empty($blogs[0]))
            @foreach($blogs as $blog)
                
                    <div  class="col-md-4 mb-4">
                        <a href="{{url("blog/".$blog->key)}}" class="card blog-post">
                          
                            
                            @if(!empty($blog->image))
                            <img class="card-img-top" src="{{asset(Config("params.media_path.large").$blog->image)}}" alt="">
        
                            @else
                            <img src="{{ asset('/front/images/slider-1.jpg') }}" class="img-fluid card-img-top" alt="">
        
                            @endif 
                            
                            <div class="card-body">
                                <!--<small class="text-uppercase post-cat mb-2 d-block">{{$blog->title}}</small>-->
                                <h5 class="card-title">{{$blog->title}}</h5>
                            </div>
                        </a>
                    </div>
                
            @endforeach
            <div class="col-md-12  text-center blog-pagination">
               {!! $blogs->links(); !!}
           </div>
            @else
                <div class="col-md-12">
                    Category Result: Not Found...!
                </div>
            @endif
           
        </div>
    </div>
</section>
@endif
</div>
@endsection

@include('vendor_script')
@section('myscript')
{{-- Page js files --}}
<script>

    $(document).ready(function () {

        $(document).on('click', '#url', function (event) {
            event.preventDefault();
//              $("#url").removeClass("active");

           var url = $("#url").attr('href');
           // alert(page);
//            fetch_data(url);
        });

        function fetch_data(page)
        {
            $.ajax({
                url: page,
                success: function (data)
                {
                    $('#test').html(data);
                }
            });
        }

    });

</script>

@endsection