@extends('frontend.layouts.main')
@section('content')
<section>
<div class="blog-hero">
    <div class="container">
        <div class="row">
            <div class="blog-hero-content">
                <h2 class="text-center text-white">{{ $blogs->title }}</h2>
            <p class="text-center text-white">Published By <strong>{{ $blogs->author_name  }}</strong> on  {{ Carbon\Carbon::parse($blogs->created_at)->format('F d Y') }}</p>
            </div>
            
        </div>
    </div>
</div>
</section>
<section>
    <div class="blog-content mt-5">
      <div class="container">
        <div class="row">
            <div class="col-md-12 ">
                <p class="blog-detail">
                    {!! $blogs->long_description !!}
                </p>
            </div>
        </div>
      </div>
    </div>
</section>
 <div class="section-block">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
            <div class="related-block">
                <h2 class="title text-center mt-4 mb-2">Related Post</h2>
                <div class="row">
                    @foreach($blog_related as $related)
                <div class="col-lg-4">
                    <div class="card p-2 mb-3 mt-3">
                        <div class="blog-image">
                            <img src="{{ asset($related->thumbnail) }}" class="img-fluid" alt="">
                         </div>
                        <div class="card-body ">
                             <div class="blog-title">
                              <a href="{{ route('frontend.blog-detail.index', $related->slug) }}" style="color: black"><h5 class="p-2 mt-2">{{ $related->title }}</h5> </a> 
                             </div>
                             <div class="blog-desc">
                               <p class="p-2">{!! $related->description !!}</p> 
                             </div>
                        </div>
                        
                    </div>
                    
                </div>
                @endforeach
                </div>
                
            </div>
            
        </div>
      </div>
    </div>
</div>
@endsection