@extends('layouts.app')
@section('content')

    <section class="banner-section-blog">
        <div class="container">
            <div class="row">
                 <div class="col-md-12 text-center">
                     <h2>Blog Listing</h2>
                 </div>
            </div>
        </div>
    </section>
    <div class="blog-section">
        <div class="container">
          <div class="row">

              <div class="col-md-8 left-mg">
                @forelse ($blogs as $blog)
                  <div class="card mb-4">
                      <img class="card-img-top" src="{{ asset('uploads/blogs/'.$blog->banner_image)}}" alt="blog1">
                      <div class="card-body">
                          <h4><a href="/blog/post/{{$blog->slug}}">{{$blog->name}}</a></h4>
                           <p class="card-text">{!! Illuminate\Support\Str::limit($blog->description, 220, $end='...</div>') !!}</p>
                          <a href="/blog/post/{{$blog->slug}}" class="btn btn2">View More</a>
                      </div>
                  </div>
                  @empty
                  <div class="card mb-4">
                      <div class="card-body">
                          <h4>No Records Found</h4>
                      </div>
                  </div>

                  @endforelse
                  <div class="col-md-12 text-center">
                  <div class="text-center blogs">
                    {{$blogs->links()}}
                  </div>
      
              </div>
                </div>
           
          <div class="col-md-4 right-mg pr-0 pl-4">
            <div class="category-outer">
              <h4 class="mb-4">Category</h4>
              <ul>
              @foreach($category as $cat)
                <li><a href="/blog/category/{{$cat->category}}">{{$cat->category}}</a></li>
              @endforeach
              </ul>
              </div>

              <div class="get-news">
                <h4>Get news &amp; tips that matter.</h4>
                <p>Everything you need to start and grow your business, straight to your inbox.</p>
                  <span id="contact_error"></span>
                    <form id="subscribefrm">
                      @csrf
                      <div class="form-group">
                        <input type="text" name="name" class="form-control" id="namesubscriber" placeholder="Enter name" required="required">
                        <span id="subsnameerror"></span>
                       </div>
                      <div class="form-group">
                        <input type="email" name="email" class="form-control" id="emailsubscriber" placeholder="Enter email" required="required">
                        <span id="subserror"></span>
                       </div>
                      <a href="javascript:void(0)" type="submit" class="btn sign-me" id="subscribe_user">Subscribe Now</a>
                    </form>
                    </div>

                    <div class="get-news" id="get-news-hidden" style="display: none;">
                        <h4>Get news &amp; tips that matter.</h4>
                         <p class="text-success">Thanks you have subscribe for the latest blogs </p>
                    </div>
                    
            <div class="recent-posts">
              <div class="row">
              <div class="col-md-12 pl-0 rght-sd">
                  <h4 class="mb-4">Popular Posts</h4>
              </div>
              </div>
               @forelse($popularPost as $toppost)
                <div class="row mb-2 main">
                    <div class="col-md-12 col-sm-12 col-12 pl-0 rght-sd">
                        <a href="/blog/post/{{$toppost->slug}}">{{$toppost->name}}</a>
                    </div>
                </div>
                @empty
                <div class="row mb-2 main">
                    <div class="col-md-12 col-sm-12 col-12 pl-0 rght-sd">
                        <a href="">No records Found</a>
                    </div>
                </div>

              @endforelse
            </div>
        </div>

            </div>

            </div>
            <div class="row">
              
            </div>
        </div>
    </div>

@endsection