@extends('frontend.master')
@section('home')




<!-- ================================
    START BREADCRUMB AREA
================================= -->
<section class="breadcrumb-area section-padding img-bg-2">
   <div class="overlay"></div>

   <div class="container">

       <div class="breadcrumb-content d-flex flex-wrap align-items-center justify-content-between">
          
           <div class="section-heading">
               <h2 class="section__title text-white"> <a href="{{ route('blogs') }}"> <i class="la la-chevron-left icon text-white"> </i> </a>   {{  $blog->blog_name }} </h2>
           </div>

           <ul class="generic-list-item generic-list-item-white generic-list-item-arrow d-flex flex-wrap align-items-center">
               <li> <a href="/"> Home </a> </li>
               <li> <a href="{{ route('blogs') }}"> Upcoming Events and Blogs </a> </li>
           </ul>

       </div><!-- end breadcrumb-content -->

   </div><!-- end container -->
</section><!-- end breadcrumb-area -->
<!-- ================================
   END BREADCRUMB AREA
================================= -->





<!-- ================================
       START BLOG AREA
================================= -->
<section class="blog-area pt-100px pb-100px">

    <div class="container">
        <div class="row">

            <div class="col-lg-8 mb-5">

                <div class="card card-item" >
                    <div class="card-body">
                       
                        <div class="row pb-3">
                            
                            <div class="col-lg-12">
                              
                                 <a href="{{ $blog->blog_url }}" target="_blank">  <img src="{{ asset($blog->blog_image) }}" alt="blog-img" class="img-fluid rounded-rounded lazy"> </a>
                              
                            </div><!-- end col-lg-12 -->
                        </div><!-- end row -->

                        <div class="row pb-3" >
                            <div class="col-lg-12">

                               <div class="card-text pb-3 mt-3 text-justify">   {!!  $blog->blog_text  !!} </div>

                            </div><!-- end col-lg-12 -->

                       </div><!-- end row -->
                        
                        <div class="section-block"></div>

                        
                    </div><!-- end card-body -->
                </div><!-- end card -->

                
                <div class="section-block"></div>
               
                
                
            </div><!-- end col-lg-8 -->


            @php
              $recentBlogs = App\Models\Blog::latest()->limit(5)->where('status', 1)->get();
            @endphp



            <div class="col-lg-4">
                <div class="sidebar">
                    
            
                    <div class="card card-item">

                        <div class="card-body">

                            <h3 class="card-title fs-18 pb-2">Recent Events and Blogs </h3>
                            
                            <div class="divider"><span></span></div>

                            @foreach( $recentBlogs as $recent)

                            <div class="media media-card border-bottom border-bottom-gray pb-4 mb-4">

                                <a href="{{ route('show.blog', $recent->blog_slug) }}" class="media-img">
                                    <img class="mr-3" src="{{ asset($recent->blog_image) }}" alt="Recent Blogs">
                                </a>

                                <div class="media-body">
                                    <h5 class="fs-15"><a href="{{ route('show.blog', $recent->blog_slug) }}">  {{  $recent->blog_name }}</a></h5>
                                </div>

                            </div><!-- end media -->

                            @endforeach

                           

                            <div class="view-all-course-btn-box">
                                <a href="{{ route('blogs') }}" class="btn theme-btn w-100">View All  <i class="la la-arrow-right icon ml-1"></i></a>
                            </div>

                        </div>
                    </div><!-- end card -->

                
                </div><!-- end sidebar -->
            </div><!-- end col-lg-4 -->

        </div><!-- end row -->
    </div><!-- end container -->
</section><!-- end blog-area -->
<!-- ================================
       START BLOG AREA
================================= -->








@endsection