@extends('website.layouts.app')
@section('title','Blog')
@section('content')

<style>
	.border-right img{
     width: 100% !important;
    height: auto !important;

	}

.border-right p{
		 text-align: justify;
		
	}
 
.row.align-items-stretch .card:only-of-type {
	 height: 100%;
}
</style>
<section class="about-blog">
	<h1 class="font-weight-bold text-center">Blog</h1>
	<h4 class="text-center" style="margin-top: -10px;">Home / Blog Details</h4>
</section>



<div class="container my-5">
	<div class="row">
		<div class="col-md-9 border-right">
			<img class="w-100 mb-3" src="{{asset($bloging->image_path ?? '')}}"  alt="" />

			<!-- <div style="max-width: 700px; top: -80px;" class="mx-auto text-secondary position-relative">
				<div class="text-center mb-4">
					<img src="https://avatars0.githubusercontent.com/u/39916324?s=460&u=602ca47fcce463981a2511a21148236f304ec934&v=4" style="width: 120px; border: 5px solid #eee; background-color: white;" class="rounded-circle mx-auto text-center" /> -->
					<!-- <div>
						<small>
							<a href="#" class="text-primary">Election</a>, <a href="#" class="text-primary">Politics</a>
						</small>
					</div> -->
					<h1 class="font-weight-bold text-dark">{{$bloging->name ?? ''}}
					</h1>

                       <div class="a2a_kit a2a_kit_size_32 a2a_default_style mb-30">
                            <a class="a2a_button_facebook"></a>
                        	 <a class="a2a_button_whatsapp"></a>
                        	  <a class="a2a_button_google_gmail"></a>
                        	  
                        	  <a class="a2a_button_linkedin"></a>
                        	   <a class="a2a_button_instagram"></a>
                            <a class="a2a_button_twitter"></a>
                            <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
                        </div>

					<!-- <div>
						<small class="text-dark">
							Written by <a href="#" class="text-primary">Ahmad Sultani</a>
						</small>
					</div> -->  
				<!-- </div> -->

				<p class="my-2" style="line-height: 2;">{!! $bloging->description ?? '' !!}</p>
				<br>
				<br>

				
				<!-- <div class="my-3">
					<small>
						<a href="#" class="text-primary">#election</a>, <a href="#" class="text-primary">#politics</a>, <a href="#" class="text-primary">#trump</a>, <a href="#" class="text-primary">#revenge</a>, <a href="#" class="text-primary">#2020</a>
					</small>
				</div> -->

			<!-- </div> -->
		</div>
		<div class="col-md-3">
			<div class="row">
				<div class="col-md-12">
					<h3 class="mb-2">Recent Blogs</h3>
					    @foreach($blogs as $blog)
					<div class="card rounded shadow border-0 mb-3">
		              <a href="{{action('WebsiteController\WebsiteController@blogdetails',[$blog->id])}}">
		                <img class="w-100 d-none" style="height: 300px; object-fit: cover; border-top-right-radius: 5px; border-top-left-radius: 5px;" src="{{ asset( $blog->image_path ?? '' )}}" alt="">
		              </a>
		              <div class="card-body p-3">
		                <a href="{{action('WebsiteController\WebsiteController@blogdetails',[base64_encode($blog->id)])}}" class="text-dark"><h5>{{ $blog->name ?? '' }}</h5></a>
		                <p class="text-muted small card-text">{!!Str::limit($blog->description, 120, $end='.......')!!}
                        </p>
		                <a class="btn btn-dark" href="{{action('WebsiteController\WebsiteController@blogdetails',[base64_encode($blog->id)])}}">Read more</a>
		              </div>
		         	</div>
		         	<!-- {!!Str::limit($blog->description, 150, $end='.......')!!} -->
		         	@endforeach

		         	<!-- <div class="card rounded shadow border-0 mb-3">
		              <a href="#">
		                <img class="w-100 d-none" style="height: 300px; object-fit: cover; border-top-right-radius: 5px; border-top-left-radius: 5px;" src="https://images.unsplash.com/photo-1572376313139-2d2c6ff7de20?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=648&amp;q=80" alt="">
		              </a>
		              <div class="card-body p-3">
		                <a href="#" class="text-dark"><h5>Blog post title</h5></a>
		                <p class="text-muted small">By Author Title on January 28, 2020</p>
		                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit..</p>
		                <a class="btn btn-dark" href="#">Read more</a>
		              </div>
		         	</div> -->
		         	<!-- <div class="card rounded shadow border-0 mb-3">
		              <a href="#">
		                <img class="w-100 d-none" style="height: 300px; object-fit: cover; border-top-right-radius: 5px; border-top-left-radius: 5px;" src="https://images.unsplash.com/photo-1572376313139-2d2c6ff7de20?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=648&amp;q=80" alt="">
		              </a>
		              <div class="card-body p-3">
		                <a href="#" class="text-dark"><h5>Blog post title</h5></a>
		                <p class="text-muted small">By Author Title on January 28, 2020</p>
		                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit..</p>
		                <a class="btn btn-dark" href="#">Read more</a>
		              </div>
		         	</div> -->
		         	<!-- <div class="card rounded shadow border-0 mb-3">
		              <a href="#">
		                <img class="w-100 d-none" style="height: 300px; object-fit: cover; border-top-right-radius: 5px; border-top-left-radius: 5px;" src="https://images.unsplash.com/photo-1572376313139-2d2c6ff7de20?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=648&amp;q=80" alt="">
		              </a>
		              <div class="card-body p-3">
		                <a href="#" class="text-dark"><h5>Blog post title</h5></a>
		                <p class="text-muted small">By Author Title on January 28, 2020</p>
		                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit..</p>
		                <a class="btn btn-dark" href="#">Read more</a>
		              </div>
		         	</div> -->
	         	</div>
	          </div>
		</div>
	</div>
	
</div>


@endsection