@extends('front.layouts.app')

@section('content')

    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header-bg" style="background-image: url(front/assets/images/backgrounds/page-header-bg.jpg)">
        </div>
        <div class="container">
            <div class="page-header__inner">
                <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="{{route('arabiaMobiles.home')}}">Home</a></li>
                    <li><span>/</span></li>
                    <li class="active">Blog</li>
                </ul>
                <h2>Blog posts</h2>
            </div>
        </div>
    </section>
    <!--Page Header End-->

    <!--Blog Page Start-->
    <section class="blog-one">
        <div class="container">
            <div class="row">
                @foreach($newsEvents as $newsEvent)
                    <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="100ms">
                        <!-- Blog One single -->
                        <div class="blog-one__single">
                            <div class="blog-one__img">
                                <img src="{{asset($newsEvent->photo)}}" alt="{{ $newsEvent->title }}">
                                <div class="blog-one__tag">
                                    <p>News</p>
                                </div>
                                <a href="{{route('arabiaMobiles.newsEventDetails',$newsEvent->id)}}">
                                    <span class="blog-one__plus"></span>
                                </a>
                            </div>
                            <div class="blog-one__content">
                                <ul class="list-unstyled blog-one__meta">
                                    <li><a href="{{route('arabiaMobiles.newsEventDetails',$newsEvent->id)}}"><i class="far fa-clock"></i> {{ \Carbon\Carbon::parse($newsEvent->date)->format('d M, Y') }}</a></li>
                                </ul>
                                <h3 class="blog-one__title">
                                    <a href="{{route('arabiaMobiles.newsEventDetails',$newsEvent->id)}}">{{ $newsEvent->title }}</a>
                                </h3>
                                <div class="blog-one__bottom">
                                    <a href="{{route('arabiaMobiles.newsEventDetails',$newsEvent->id)}}">Learn more<i class="fa fa-long-arrow-alt-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="col-lg-12">
                <div class="blog-pagination justify-content-center">
                    {{ $newsEvents->links() }}
                </div>
            </div>
        </div>
    </section>

    <!--Blog Page End-->
@endsection