@extends('edufair.layouts.master')
@section('content')
    <!-- Main Container -->
    <main id="main-container">
        <div class="findService bg-white mt-0">
            <div class="content">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ts-blog pb-5">
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="py-5 text-center" id="heading_ti_adn">
                                            <h1 class="font-w700 mb-2" id="f_ad_ne_main_title">
                                               Latest News
                                            </h1>
                                        </div>
                                    </div><!-- col end-->
                                </div><!-- row end-->
                                <div class="row">
                                    @foreach($articles as $article)
                                        <div class="col-lg-4 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="400ms" style="visibility: visible; animation-duration: 1.5s; animation-delay: 400ms; animation-name: fadeInUp;">
                                            <div class="post">
                                                <div class="post-media post-image">
                                                    <a href="{{url('edufair/news'.'/'.$article->slug)}}">
                                                        @if(isset($article->image))
                                                            @php
                                                                $url = config('filesystems.asset').'/'.'articles'.'/'.$article->image;
                                                                $uploadedFile = pathinfo($url);
                                                                $old_filename = $uploadedFile['filename'];
                                                                $extension = $uploadedFile['extension'];
                                                                $imageLink = config('filesystems.asset').'/'.'articles'.'/'.$old_filename.'.webp';
                                                            @endphp

                                                            <picture>
                                                                <source type="image/webp" srcset="{{$imageLink}}">
                                                                <source type="image/{{$extension}}" srcset="{{$url}}">
                                                                <img class="img-fluid" src="{{$url}}" alt="{{$article->title}}">
                                                            </picture>
                                                        @else
                                                            <img src="{{asset('public/theme/assets/media/img/blog1.jpg')}}" class="img-fluid" alt="">
                                                        @endif
                                                    </a>
                                                </div>
                                                <div class="post-body">
                                                    <div class="post-meta">
                                                       <span class="post-author">
                                                         <a href="javascript:void(0)">BY Admin</a>
                                                       </span>
                                                        <div class="post-meta-date">
                                                            July 11, 2020 {{date('F d, Y',strtotime($article->created_at))}}
                                                        </div>
                                                    </div>
                                                    <div class="entry-header">
                                                        <h2 class="entry-title">
                                                            <a href="{{url('edufair/news'.'/'.$article->slug)}}">{{$article->title}}</a>
                                                        </h2>
                                                    </div><!-- header end -->
                                                    {{--<div class="entry-content">--}}
                                                        {{--<div class="text-justify">--}}
                                                            {{--{!! \Illuminate\Support\Str::limit($article->details,120) !!}--}}
                                                        {{--</div>--}}
                                                    {{--</div>--}}

                                                    {{--<div class="post-footer">--}}
                                                        {{--<a href="{{url('edufair/news'.'/'.$article->slug)}}" class="btn-link">Read More <i class="icon icon-arrow-right"></i></a>--}}
                                                    {{--</div>--}}

                                                </div><!-- post-body end -->
                                            </div>
                                            <!-- post end-->
                                        </div><!-- col end-->
                                    @endforeach
                                    <div class="col-sm-12 text-center">
                                        {{ $articles->withQueryString()->links() }}
                                    </div>
                                </div>
                                <!-- row end-->
                            </div><!-- container end-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @section('after_js')
        @if(!(\Illuminate\Support\Facades\Auth::check()))
        <script type="text/javascript">
            $(window).on('load',function(){
                $('#myModal').modal('show');
            });
        </script>
        @endif
@endsection