@extends('customer.header')
 @section('customerContent')
   <!-- wrapper  -->
   <div id="wrapper">
     <!-- content -->
     <div class="content">
       <!-- breadcrumbs-->
       <div class="breadcrumbs fw-breadcrumbs sp-brd fl-wrap top-smpar ">
         <div class="container">
           <div class="breadcrumbs-list">
             <a href="javascript:;">Home</a><a href="javascript:;">Blog</a> <span>{{ ucwords($blog->name) }}</span>
           </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> -->
                 <article class="post-article fl-wrap">
                   <div class="list-single-main-media fl-wrap">
                     <div class="single-slider-wrapper carousel-wrap fl-wrap">
                       <div class="single-slider fl-wrap carousel lightgallery">
                         <!--  slick-slide-item -->
                         <div class="slick-slide-item">
                           <div class="box-item">
                             <img
                               src="{{ isset($blog->image)? asset('consultant/public/uploads/blog') . '/' . $blog->image: asset('allUsers/customer/images/all/blog/1.jpg') }}"
                               alt="">
                           </div>
                         </div>
                       </div>
                     </div>
                     <div class="list-single-main-item fl-wrap block_box">
                       <div class="single-article-header fl-wrap">
                         <h2 class="post-opt-title"><a href="javascript:;">{{ ucwords($blog->name) }}</a></h2>
                         <span class="fw-separator"></span>
                         <div class="clearfix"></div>
                         <div class="post-author"><a href="#"><img
                               src="{{ asset('allUsers/customer/images/avatar/5.jpg') }}" 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>
                       </div>
                       <span class="fw-separator fl-wrap"></span>
                       <p>
                         {!! htmlspecialchars_decode($blog->content) !!}
                       </p>
                       <div class="clearfix"></div>
                       <span class="fw-separator fl-wrap"></span>
                       <div class="list-single-tags tags-stylwrap">
                         <span class="tags-title"> Tags : </span>
                         <a href="javascript:;">{{ @$blog->category->category_name }}</a>
                       </div>
                     </div>
                 </article>
               </div>
             </div>
             <!-- col-md 8 end -->
             <!--  sidebar-->
             <div class="col-md-4">
               <div class="box-widget-wrap fl-wrap fixed-bar">
                 <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="{{ isset($blog->image)? asset('consultant/public/uploads/blog') . '/' . $blog->image: asset('allUsers/customer/images/all/blog/1.jpg') }}">
                       </div>
                     </div>
                     <div class="banner-widget_content">
                       <h5>Do you want to join us?</h5>
                       <a href="javascript:;"
                         class="btn float-btn color-bg small-btn @if (!Auth::guard('buyer')->check()) modal-open @endif">Become
                         an Agent</a>
                     </div>
                   </div>
                 </div>
               </div>
               <!-- sidebar end-->
             </div>
           </div>
         </div>
       </div>
       <div class="limit-box fl-wrap"></div>
     </div>
     <!-- content end -->
   @endsection