@extends('layout.app')

@section('content')
    <!-- section start -->
    <section class="layout-pt-xl layout-pb-md">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div class="row justify-content-center text-center">
                <div class="col-xl-7 col-lg-8">
                    <ul class="breadcrumbs justify-content-center text-black mb-40">
                        <li class="breadcrumbs-item">
                            <a href="/"> Home </a>
                        </li>
                        <li class="breadcrumbs-item active" aria-current="page">
                            Blog
                        </li>
                    </ul>

                    <div class="sectionHeading -lg">
                        <h1 class="sectionHeading__title">Our Business Blog</h1>
                    </div>
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

    <!-- section start -->
    <section class="layout-pt-xs layout-pb-md">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div class="row no-gutters justify-content-between">
                <!-- posts start -->
                <div class="col-lg-8">
                    <div class="row x-gap-60 y-gap-60">
                        @foreach ($articles as $article)
                            <div class="col-md-6">
                                <!-- blog-item start -->
                                <div data-anim="slide-up" class="blogPost mb-0">
                                    <a href="{{ route('articles.show', $article) }}">
                                        <div class="blogPost__img -hover">
                                        <div
                                            class="bg-image ratio ratio-4:3 js-lazy"
                                            data-bg="{{ Storage::url($article->article_image_path) }}"
                                        ></div>
                                        </div>
                                    </a>

                                    <!-- blog-content start -->
                                    <div class="blogPost__content mt-24">
                                        <div class="blogPost__info leading-md">
                                            @foreach ($article->categories as $category)
                                                @if (!$loop->last)
                                                    <a href="#">{{ $category->name }}</a>,
                                                @else
                                                    <a href="#">{{ $category->name }}</a>
                                                @endif
                                            @endforeach
                                        </div>

                                        <h3
                                        class="blogPost__title text-2xl leading-lg fw-500 mt-12"
                                        >
                                            <a href="{{ route('articles.show', $article) }}">
                                                {{ $article->title }}
                                            </a>
                                        </h3>

                                        <p class="blogPost__text text-base mt-8">
                                            Third and, them Isn&#39;t years wherein man without he
                                            to also green had cattle...
                                        </p>

                                        <div class="blogPost__button text-black mt-12">
                                            <a
                                                data-barba
                                                href="{{ route('articles.show', $article) }}"
                                                class="button -icon text-black"
                                            >
                                                Read More
                                                <i
                                                class="icon size-xs str-width-md"
                                                data-feather="arrow-right"
                                                ></i>
                                            </a>
                                        </div>
                                    </div>
                                    <!-- blog-content end -->
                                </div>
                                <!-- blog-item end -->
                            </div>
                        @endforeach
                    </div>


                    {{ $articles->links() }}

                    {{-- <div class="blogPost-pagination mt-64">
                        <div class="blogPost-pagination__wrap">
                            <a class="is-active" href="#">1</a>
                            <a href="#">2</a>
                            <a href="#">3</a>
                            <span>...</span>
                            <a href="#">6</a>
                        </div>
                    </div> --}}
                </div>
                <!-- posts end -->

                <!-- sidebar start -->
                <div class="col-lg-4 md:mt-64">
                    <aside class="blogSidebar widget_area">
                        {{-- <div class="widget widget_categories">
                            <h5 class="widget-title">Categories</h5>

                            <ul>
                            <li>
                                <a href="#">Accounting</a>
                                (5)
                            </li>
                            <li>
                                <a href="#">Taxation</a>
                                (4)
                            </li>
                            <li>
                                <a href="#">Auditing</a>
                                (16)
                            </li>
                            </ul>
                        </div> --}}

                        <!-- widget start -->
                        <div class="widget widget_recent_entries">
                            <h5 class="widget-title">Recent Posts</h5>

                            <ul>
                                @foreach ($recentArticles as $article)
                                    <li>
                                        <span class="post-date">{{ $article->created_at->diffForHumans() }}</span>
                                        <a href="{{ route('articles.show', $article) }}">
                                            {{ $article->title }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <!-- widget end -->
                    </aside>
                </div>
                <!-- sidebar end -->
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->
@endsection