@extends('website.layouts.app')
@section('title','Blog')
@section('content')
<style>
  .card-body > p{
    text-align: justify;
   display: block;
  display: -webkit-box;
      max-width: 100%;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.5;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
  .content-body {
    min-height: 290px;
    max-height: 300px;
    overflow: hidden;
    margin-bottom: 10px;
}


@media only screen and (max-width: 600px) {
  .content-body {
    min-height: 290px;
    max-height: 310px;
    overflow: hidden;
    margin-bottom: 10px;
    text-overflow: ellipsis;
    line-height: 1.4;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

}




.limits{
      display: -webkit-box;
    max-width: 100%;

    margin: 0 auto;
    font-size: 14px;
    line-height: 1.5;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*.card-body{max-height: 350px;
    overflow-y: scroll;
}

*/
</style>
    <section class="about-blog">
        <h1 class="font-weight-bold text-center">Blog</h1>
     
    </section>

<section>

 

<!-- Type 1 -->
<div class="container">
    <div class="row">
      <div class="col-12">
        <!-- <h2 class="float-left">Bootstrap 4 Blog List-Blog / Grid Layout</h2> -->
        <div class="btn-group float-right">
            <div class="btn-group btn-group-toggle py-3" data-toggle="buttons">
            
              
                <label id="list-Blog" class="btn btn-outline-dark active">
                <input type="radio" name="layout" id="layout1" checked> Blog List
              </label>
              <label id="grid" class="btn btn-outline-dark">
                <input type="radio" name="layout" id="layout2"> Grid
              </label>
            </div>
        </div>
      </div>
    </div>

    <div id="posts" class="row mt-4">
      @foreach($blogs as $blog)
        <div class="item col-12 mb-3">
          <div class="card rounded shadow border-0">
              <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">
                <div class="content-body">
                  <a href="{{action('WebsiteController\WebsiteController@blogdetails',[base64_encode($blog->id)])}}" class="text-dark">
                  <h4 class="card-title">{{$blog->name}}</h4>
                </a>
                <div class="text-muted small limits card-text">
                  {!!Str::limit($blog->description, 700, $end='.......')!!}
                </div>
                </div>
                <a class="btn btn-dark" href="{{action('WebsiteController\WebsiteController@blogdetails',[base64_encode($blog->id)])}}">Read more</a>
              </div>
          </div>
        </div>
        @endforeach
        <!-- <div class="item col-12 mb-3">
          <div class="card rounded shadow border-0">
              <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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=648&q=80" alt="" />
              </a>
              <div class="card-body p-3">
                <a href="#" class="text-dark"><h4>Blog post title</h4></a>
                <p class="text-muted small">By Author Title on January 28, 2020</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                <a class="btn btn-dark" href="#">Read more</a>
              </div>
          </div>
        </div> -->
    <!--     <div class="item col-12 mb-3">
          <div class="card rounded shadow border-0">
              <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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=648&q=80" alt="" />
              </a>
              <div class="card-body p-3">
                <a href="#" class="text-dark"><h4>Blog post title</h4></a>
                <p class="text-muted small">By Author Title on January 28, 2020</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                <a class="btn btn-dark" href="#">Read more</a>
              </div>
          </div>
        </div> -->
    </div>
</div>

</section>

@endsection