@extends('layouts.app')

@section('content')
    @include('includes.sub_header', ['page_name' => 'BLOGS', 'page_title' => 'NEWS & BLOGS'])

    <div id="content" >
    <div class="container">
        <div class="row">
            @forelse ($blogs as $blog)
                <div class="col-lg-4 col-md-6 mb30">
                    <div class="bloglist item">
                        <div class="post-content">
                            <div class="post-image">
                                <a class="" href="{{ route('blog.show', $blog->slug) }}">
                                    <img alt="" src="{{ asset($blog->image) }}" />
                                </a>
                            </div>
                            <div class="post-text">
                                <span class="p-tagline text-white">{{ $blog->category->name }}</span>
                                <h4>
                                    <a href="{{ route('blog.show', $blog->slug) }}">{{ $blog->title }}</a>
                                </h4>
                                <p>
                                    {{ Str::limit($blog->description, 100) }}
                                </p>
                                <span class="p-date d-flex align-items-center">
                                    <small class="id-color me-2">
                                        <i style="font-size: 18px" class="fa fa-clock-o"></i>
                                    </small>
                                    {{ $blog->created_at->toDateString() }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-lg-4 col-md-6 mb30">
                    <div class="bloglist item">
                        <div class="post-content">
                            <div class="post-image">
                                <a class="image-popup-no-margins" href="./projects/almoasher/kitchen1-2.jpg">
                                    <img alt="" src="./projects/almoasher/kitchen1-2.jpg" />
                                </a>
                            </div>
                            <div class="post-text">
                                <span class="p-tagline text-white">Services</span>
                                <h4>
                                    <a href="blog-single.html">New Bathroom Design Trends<span></span></a>
                                </h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                                    sed do eiusmod tempor incididunt ut labore et dolore magna
                                    aliqua. Ut enim ad minim veniam.
                                </p>
                                <span class="p-date d-flex align-items-center">
                                    <small class="id-color me-2">
                                        <i style="font-size: 18px" class="fa fa-clock-o"></i>
                                    </small>
                                    October 28, 2020
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mb30">
                    <div class="bloglist item">
                        <div class="post-content">
                            <div class="post-image">
                                <a class="image-popup-no-margins" href="./projects/shorouk/7.jpg">
                                    <img alt="" src="./projects/shorouk/7.jpg" />
                                </a>
                            </div>
                            <div class="post-text">
                                <span class="p-tagline text-white">Projects</span>
                                <h4>
                                    <a href="blog-single.html">5 Tips to Choose Furnitures<span></span></a>
                                </h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                                    sed do eiusmod tempor incididunt ut labore et dolore magna
                                    aliqua. Ut enim ad minim veniam.
                                </p>
                                <span class="p-date d-flex align-items-center">
                                    <small class="id-color me-2">
                                        <i style="font-size: 18px" class="fa fa-clock-o"></i>
                                    </small>
                                    October 28, 2020
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mb30">
                    <div class="bloglist item">
                        <div class="post-content">
                            <div class="post-image">
                                <a class="image-popup-no-margins" href="./projects/fleurelle-01/1_6 - Ext Detail.jpg">
                                    <img alt="" src="./projects/fleurelle-01/1_6 - Ext Detail.jpg" />
                                </a>
                            </div>
                            <div class="post-text">
                                <span class="p-tagline text-white">Services</span>
                                <h4>
                                    <a href="blog-single.html">The 5 Secrets of Minimal Design<span></span></a>
                                </h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                                    sed do eiusmod tempor incididunt ut labore et dolore magna
                                    aliqua. Ut enim ad minim veniam.
                                </p>
                                <span class="p-date d-flex align-items-center">
                                    <small class="id-color me-2">
                                        <i style="font-size: 18px" class="fa fa-clock-o"></i>
                                    </small>
                                    October 28, 2020
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mb30">
                    <div class="bloglist item">
                        <div class="post-content">
                            <div class="post-image">
                                <a class="image-popup-no-margins" href="./projects/fawry/1.jpg">
                                    <img alt="" src="./projects/fawry/1.jpg" />
                                </a>
                            </div>
                            <div class="post-text">
                                <span class="p-tagline text-white">Projects</span>
                                <h4>
                                    <a href="blog-single.html">Make a Huge Impact With Paints<span></span></a>
                                </h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                                    sed do eiusmod tempor incididunt ut labore et dolore magna
                                    aliqua. Ut enim ad minim veniam.
                                </p>
                                <span class="p-date d-flex align-items-center">
                                    <small class="id-color me-2">
                                        <i style="font-size: 18px" class="fa fa-clock-o"></i>
                                    </small>
                                    October 28, 2020
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mb30">
                    <div class="bloglist item">
                        <div class="post-content">
                            <div class="post-image">
                                <a class="image-popup-no-margins" href="./projects/shorouk/1-1.jpg">
                                    <img alt="KB" src="./projects/shorouk/1-1.jpg" />
                                </a>
                            </div>
                            <div class="post-text">
                                <span class="p-tagline text-white">Projects</span>
                                <h4>
                                    <a href="blog-single.html">Interior Design Trends of 2021<span></span></a>
                                </h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                                    sed do eiusmod tempor incididunt ut labore et dolore magna
                                    aliqua. Ut enim ad minim veniam.
                                </p>
                                <span class="p-date d-flex align-items-center">
                                    <small class="id-color me-2">
                                        <i style="font-size: 18px" class="fa fa-clock-o"></i>
                                    </small>
                                    October 28, 2020
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            @endforelse

            <div class="spacer-single"></div>

            {!! $blogs->links('pagination::default') !!}
        </div>
    </div>
    <div class="spacer-single"></div>
    <div class="spacer-single"></div>

    <section id="view-all-projects" class="call-to-action bg-color text-center mt-5" data-speed="5"
        data-type="background" aria-label="view-all-projects">
        <a href="{{ route('contact.index') }}" class="btn btn-line black btn-big">Get Quotation</a>
    </section>

@endsection

@section('scripts')
@endsection