@extends('layouts.master')

@section('SpecificStyles')
@stop

@section('title', 'Contact')

@section('content')

<main class="main">
   <div class="page-header text-center" style="background-image: url('{{ asset('assets/front/images/page-header-bg.jpg')}}">
                <div class="container">
                    <h1 class="page-title">Blogs <span>Page</span></h1>
                </div><!-- End .container -->
    </div><!-- End .page-header -->

    <nav aria-label="breadcrumb" class="breadcrumb-nav border-0 mb-0">
        <div class="container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{url('/blog')}}">Blog</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $blog->title }}</li>
            </ol>
        </div><!-- End .container -->
    </nav><!-- End .breadcrumb-nav -->
    <div class="">
        <div class=" text-center" style="background-image: url({{ asset('frontend/assets/images/page-header-bg.jpg') }})">
        </div><!-- End .page-header -->
    </div><!-- End .container -->

    <div class="page-content">

      <div class="container">

        <article class="entry single-entry entry-fullwidth">
            <div class="row">
                <div class="col-lg-11">
                    <div class="entry-body">

                        <div class="entry-content editor-content" >
                            {!!$blog->content!!}
                        </div>
                    </div>
                </div>



                <div class="col-lg-1 order-lg-first mb-2 mb-lg-0">
                    <div class="sticky-content">
                        <div class="social-icons social-icons-colored social-icons-vertical">
                            <span class="social-label">SHARE:</span>
                            <a href="#" class="social-icon social-facebook" title="Facebook"
                                target="_blank"><i class="icon-facebook-f"></i></a>
                            <a href="#" class="social-icon social-twitter" title="Twitter"
                                target="_blank"><i class="icon-twitter"></i></a>
                            <a href="#" class="social-icon social-pinterest" title="Pinterest"
                                target="_blank"><i class="icon-pinterest"></i></a>
                            <a href="#" class="social-icon social-linkedin" title="Linkedin"
                                target="_blank"><i class="icon-linkedin"></i></a>
                        </div><!-- End .soial-icons -->
                    </div><!-- End .sticky-content -->
                </div><!-- End .col-lg-1 -->
            </div><!-- End .row -->


        </article>







          <div class="related-posts">
              <h3 class="title">Related Blogs</h3>

              <div class="owl-carousel owl-simple" data-toggle="owl" data-owl-options='{
                      "nav": false,
                      "dots": true,
                      "margin": 20,
                      "loop": false,
                      "responsive": {
                          "0": {
                              "items":1
                          },
                          "480": {
                              "items":2
                          },
                          "768": {
                              "items":3
                          },
                          "992": {
                              "items":4
                          }
                      }
                  }'>


              {{-- Blogs  --}}
              @php $blogs = App\Models\Blog::all(); @endphp
              @if(count($blogs) > 0)

              @foreach ($blogs->reverse() as $blog)

                  <article class="entry entry-grid">
                      <figure class="entry-media">
                          <a href="{{ route('blog_post', $blog->slug) }}">
                              <img src="{{ asset('upload/blogs/' . $blog->image)}}" alt="image desc">
                          </a>
                      </figure>

                      <div class="entry-body">
                          <div class="entry-meta">
                              <a href="#">{{ \Carbon\Carbon::parse($blog->created_at)->format('d M Y ') }}</a>
                              <span class="meta-separator">|</span>
                              {{-- <a href="#">2 Comments</a> --}}
                          </div>

                          <h2 class="entry-title">
                              <a href="{{ route('blog_post', $blog->slug) }}">{{ $blog->title }}</a>
                          </h2>

                          <div class="entry-cats">
                            {{ $blog->short_description }}
                          </div>
                      </div>
                  </article>

                  @endforeach
                @endif



                  {{-- <article class="entry entry-grid">
                      <figure class="entry-media">
                          <a href="single.html">
                              <img src="{{ asset('frontend/assets/images/blog/post-4.jpg') }}" alt="image desc">
                          </a>
                      </figure>

                      <div class="entry-body">
                          <div class="entry-meta">
                              <a href="#">Nov 22, 2018</a>
                              <span class="meta-separator">|</span>
                              <a href="#">2 Comments</a>
                          </div>

                          <h2 class="entry-title">
                              <a href="single.html">Cras ornare tristique elit.</a>
                          </h2>

                          <div class="entry-cats">
                              in <a href="#">Lifestyle</a>,
                              <a href="#">Shopping</a>
                          </div>
                      </div>
                  </article>  --}}

              </div><!-- End .owl-carousel -->
          </div><!-- End .related-posts -->
      </div><!-- End .container -->
  </div><!-- End .page-content -->


@endsection

@section('SpecificScripts')

@stop