@extends('web.layout.app')
@section('content')
<main id="content" class="wrapper layout-page">
  <section class="z-index-2 position-relative pb-2 mb-12">
    <div class="bg-body-secondary mb-3">
      <div class="container">
        <nav class="py-4 lh-30px" aria-label="breadcrumb">
          <ol class="breadcrumb justify-content-center py-1 mb-0">
            <li class="breadcrumb-item"><a title="Home" href="{{url('/')}}">{{translate('Home')}}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{translate('Blog')}}</li>
          </ol>
        </nav>
      </div>
    </div>
  </section>
  <section class="pt-10 pb-16 pb-lg-18">
    <div class="container">
      <div class="row">
        <div class="col-lg-4">
          <div class="position-sticky top-0">
            <aside class="primary-sidebar mt-12 pt-2 mt-lg-0 pt-lg-0 pe-xl-9 me-xl-2">
              <div class="widget widget-category">
                <h4 class="widget-title fs-5 mb-6">{{translate('Category')}}</h4>
                <ul class="navbar-nav navbar-nav-cate" id="widget_category">
                  @foreach($categories as $category)
                  <li class="nav-item">
                    <a href="{{url('blogs?category='.$category->id)}}" title="Make up" class="text-reset position-relative d-block text-decoration-none text-body-emphasis-hover d-flex align-items-center"><span class="text-hover-underline">{{$category->getTranslation('name')}}</span></a></li>
                    @endforeach
                </ul>
              </div>
              <div class="widget widget-post">
                <h4 class="widget-title fs-5 mb-6">{{translate('Recent posts')}}</h4><ul class="list-unstyled mb-0 row gy-7 gx-0">

                 @foreach($blogs as $r)
                  <li class="col-12">
                    <div class="card border-0 flex-row">
                      <figure class="flex-shrink-0 mb-0 me-7">
                        <a href="{{url('blog/'.$r->getTranslation('slug'))}}" class="d-block" title="Why You Should Try an Overnight Balm">
                          <img data-src="../assets/images/blog/post-12-60x80.jpg" class="img-fluid lazy-image" alt="Why You Should Try an Overnight Balm" width="60" height="80" src="#">
                        </a>
                      </figure>
                      <div class="card-body p-0">
                        <h5 class="card-text fw-semibold ls-1 text-uppercase fs-13px mb-3 text-body text-primary-hover"><a class="text-decoration-none text-reset"  title="Skin care">{{$r->category->getTranslation('slug')}}</a></h5>
                        <h4 class="card-title mb-0 text-body-emphasis fs-15px lh-base text-primary-hover"><a class="text-decoration-none text-reset" href="{{url('blog/'.$r->getTranslation('slug'))}}" title="Why You Should Try an Overnight Balm">{{$r->getTranslation('name')}}</a></h4>
                      </div>
                    </div>
                  </li>
                  @endforeach
               </ul></div>

            </aside>
          </div>
        </div>
        <div class="col-lg-8">
          <div class=" text-center mb-13">
            <a href="{{url('blogs?category='.$blog->category->id)}}" class="btn btn-light btn-hover-bg-dark btn-hover-border-dark btn-hover-text-light shadow-none py-0 px-6 mb-6">
              {{$blog->category->getTranslation('name')}}
            </a>
            <h2 class=" px-6 text-body-emphasis border-0 fw-500 mb-4 fs-3 ">
              {{$blog->getTranslation('name')}}
            </h2>
            <ul class="list-inline fs-15px fw-semibold letter-spacing-01 d-flex justify-content-center align-items-center">
              <li><img data-src="../assets/images/blog/post-detail-header-img.png" alt="Grace" class="lazy-image img-fluid" src="#"></li>

              <li class="list-inline-item px-6">{{date_format($blog->created_at,'Y m d')}}</li>

            </ul>
          </div>
          <div class="post-content">
            <img data-src="{{$blog->image}}" width="770" height="470" alt class="lazy-image mb-12 img-fluid" src="#">
            <p class=" mb-6">

              {{$blog->getTranslation('description')}}
              </p>
          </div>

        </div>
      </div>
    </div>
  </section>
</main>

@endsection