@extends('customer.header')
 @section('customerContent')
   <!-- wrapper  -->
   <div id="wrapper">
     <!-- content -->
     <div class="content">
       <!--  section  -->
       <section class="hidden-section single-par2  " data-scrollax-parent="true">
         <div class="bg-wrap bg-parallax-wrap-gradien">
           <div class="bg par-elem " data-bg="{{ asset('allUsers/customer/images/bg/4.jpg') }}"
             data-scrollax="properties: { translateY: '30%' }"></div>
         </div>
         <div class="container">
           <div class="section-title center-align big-title">
             <h2><span>Our Blogs</span></h2>
             {{-- <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec tincidunt arcu, sit amet fermentum sem.
             </h4> --}}
           </div>
           <div class="scroll-down-wrap">
             <div class="mousey">
               <div class="scroller"></div>
             </div>
             <span>Scroll Down To Discover</span>
           </div>
         </div>
       </section>
       <!--  section  end-->
       <!-- breadcrumbs-->
       <div class="breadcrumbs fw-breadcrumbs sp-brd fl-wrap">
         <div class="container">
           <div class="breadcrumbs-list">
             <a href="#">Home</a> <span>Blog</span>
           </div>
           {{-- <div class="share-holder hid-share">
             <a href="#" class="share-btn showshare sfcs"> <i class="fas fa-share-alt"></i> Share </a>
             <div class="share-container  isShare"></div>
           </div> --}}
         </div>
       </div>
       <!-- breadcrumbs end -->
       <!-- col-list-wrap -->
       <div class="gray-bg small-padding fl-wrap">
         <div class="container">
           <div class="row">
             <div class="col-md-8">
               <div class="post-container fl-wrap">
                 <!-- article> -->
                 @foreach ($blogs as $blog)
                   <article class="post-article fl-wrap">
                     <div class="list-single-main-media fl-wrap">
                       <a href="{{ route('blog-detail', [$blog->slug]) }}">
                         <img
                           src="{{ isset($blog->image)? asset('consultant/public/uploads/blog') . '/' . $blog->image: asset('allUsers/customer/images/all/blog/4.jpg') }}"
                           class="respimg" alt="{{ $blog->slug }}">
                       </a>
                     </div>
                     <div class="list-single-main-item fl-wrap block_box">
                       <h2 class="post-opt-title"><a
                           href="{{ route('blog-detail', [$blog->slug]) }}">{{ ucwords($blog->name) }}</a>
                       </h2>
                       <p>{{ $blog->short_desc }}...</p>
                       <span class="fw-separator fl-wrap"></span>
                       <div class="post-author"><a href="#"><img src="{{ asset('allUsers/admin.png') }}"
                             alt=""><span>By , {{ ucwords(@$blog->author->name) }}</span></a></div>
                       <div class="post-opt">
                         <ul class="no-list-style">
                           <li><i class="fal fa-calendar"></i> <span>{{ $blog->created_at->format('d M, Y') }}</span>
                           </li>
                           <li><i class="fal fa-eye"></i> <span>{{ $blog->view_count }}</span></li>
                           <li><i class="fal fa-tags"></i><a href="#"> {{ @$blog->category->category_name }}</a>
                           </li>
                         </ul>
                       </div>
                       <a href="{{ route('blog-detail', [$blog->slug]) }}"
                         class="btn color-bg float-btn small-btn">Read more</a>
                     </div>
                   </article>
                 @endforeach
                 <!-- article end -->
                 <!-- pagination-->
                 {{ $blogs->links('vendor.pagination.custom') }}
                 <!-- pagination end-->
               </div>
             </div>
             <!-- col-md 8 end -->
             <!--  sidebar-->
             <div class="col-md-4">
               <div class="box-widget-wrap fl-wrap fixed-bar">
                 <!--box-widget-->
                 {{-- <div class="box-widget fl-wrap">
                   <div class="search-widget fl-wrap">
                     <form action="#" class="fl-wrap custom-form">
                       <input name="se" id="se" type="text" class="search" placeholder="Search.." value="" />
                       <button class="search-submit" id="submit_btn"><i class="far fa-search"></i></button>
                     </form>
                   </div>
                 </div> --}}
                 <!--box-widget end -->
                 <!--box-widget-->
                 <div class="box-widget fl-wrap">
                   <div class="box-widget-title fl-wrap">Popular Posts</div>
                   <div class="box-widget-content fl-wrap">
                     <!--widget-posts-->
                     <div class="widget-posts  fl-wrap">
                       <ul class="no-list-style">
                         @foreach ($relatedBlogs as $relatedBlog)
                           <li>
                             <div class="widget-posts-img"><a
                                 href="{{ route('blog-detail', [$relatedBlog->slug]) }}"><img
                                   src="{{ isset($relatedBlog->image)? asset('consultant/public/uploads/blog') . '/' . $relatedBlog->image: asset('allUsers/customer/images/all/blog/5.jpg') }}"
                                   alt=""></a></div>
                             <div class="widget-posts-descr">
                               <h4><a
                                   href="{{ route('blog-detail', [$relatedBlog->slug]) }}">{{ ucwords($relatedBlog->name) }}</a>
                               </h4>
                               <div class="geodir-category-location fl-wrap"><a
                                   href="{{ route('blog-detail', [$relatedBlog->slug]) }}"><i
                                     class="fal fa-calendar"></i>
                                   {{ $relatedBlog->created_at->format('d M, Y') }}</a></div>
                             </div>
                           </li>
                         @endforeach
                       </ul>
                     </div>
                     <!-- widget-posts end-->
                   </div>
                 </div>
                 <!--box-widget end -->
                 <!--box-widget-->
                 <div class="box-widget fl-wrap">
                   <div class="box-widget-title fl-wrap">Categories</div>
                   <div class="box-widget-content fl-wrap">
                     <ul class="cat-item no-list-style">
                       @foreach ($categories as $category)
                         <li><a
                             href="{{ route('blogs', $category->category_slug) }}">{{ $category->category_name }}</a>
                           <span>{{ $category->mappedBlogs->count() }}</span>
                         </li>
                       @endforeach
                     </ul>
                   </div>
                 </div>
                 <!--box-widget end -->
                 <!--box-widget-->
                 <div class="box-widget fl-wrap">
                   <div class="banner-widget fl-wrap">
                     <div class="bg-wrap bg-parallax-wrap-gradien">
                       <div class="bg  " data-bg="{{ asset('allUsers/customer/images/all/blog/1.jpg') }}">
                       </div>
                     </div>
                     <div class="banner-widget_content">
                       <h5>Do you want to join our real estate network?</h5>
                       <a href="#" class="btn float-btn color-bg small-btn">Become an Agent</a>
                     </div>
                   </div>
                 </div>
                 <!--box-widget end -->
                 <!--box-widget-->
                 {{-- <div class="box-widget fl-wrap">
                   <div class="box-widget-title fl-wrap">Tags</div>
                   <div class="box-widget-content fl-wrap">
                     <!--tags-->
                     <div class="list-single-tags fl-wrap tags-stylwrap" style="margin-top: 20px;">
                       <a href="#">Hotel</a>
                       <a href="#">Hostel</a>
                       <a href="#">Room</a>
                       <a href="#">Spa</a>
                       <a href="#">Restourant</a>
                       <a href="#">Parking</a>
                     </div>
                     <!--tags end-->
                   </div>
                 </div> --}}
                 <!--box-widget end -->
                 <!--box-widget-->
                 {{-- <div class="box-widget fl-wrap">
                   <div class="box-widget-title fl-wrap">Archive</div>
                   <div class="box-widget-content fl-wrap">
                     <ul class="cat-item cat-item_dec no-list-style">
                       <li><a href="#">March 2020</a></li>
                       <li><a href="#">May 2019</a> </li>
                       <li><a href="#">January 2016</a> </li>
                       <li><a href="#">Decemder 2018</a> </li>
                     </ul>
                   </div>
                 </div> --}}
                 <!--box-widget end -->
               </div>
               <!-- sidebar end-->
             </div>
           </div>
         </div>
       </div>
       <div class="limit-box fl-wrap"></div>
     </div>
     <!-- content end -->
   @endsection