@extends('layouts.front')
@section('content')
    <style>
        .load_more_button {
            width: 180px;
            height: 50px;
            text-align: center;
            padding: 5px;
            background-color: #B57067;
            color: #fff;
            border: none;
            border-radius: 30px;


        }
    </style>
    <div class="main-content">
        <!-- Section: inner-header -->
        <section class="inner-header divider parallax layer-overlay overlay-dark-8"
            data-bg-img="{{ asset('images/banner-2.png') }}">
            <div class="container pt-60 pb-60">
                <!-- Section Content -->
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <h2 class="title text-white">News</h2>
                            <ol class="breadcrumb text-center text-black mt-10">
                                <li><a href="#">Home</a></li>
                                <li class="active text-white">News</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- Section: Blog -->
        <section id="blog">
            <div class="container pb-70 pt-70">
                <div class="section-title text-center">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            <h2 class="mt-0 line-height-1 text-uppercase">Recent <span class="text-theme-colored">
                                    News</span></h2>
                        </div>
                    </div>
                </div>
                <div class="section-content">
                    <div class="row recent_news" id="data-wrapper">
                        @forelse ($blogs as $blog)
                            <div class="col-xs-12 col-sm-6 col-md-4 mb-3">
                                <article class="post clearfix mb-sm-30">
                                    <div class="entry-header">
                                        <div class="entry-date media-left flip text-center">
                                            <ul>
                                                <li
                                                    class="font-16 font-weight-600 border-bottom bg-white-f1 pt-5 pr-15 pb-5 pl-15">
                                                    {{ $blog->created_at->format('d') }}</li>
                                                <li
                                                    class="font-12 text-white text-uppercase bg-theme-colored pt-5 pr-15 pb-5 pl-15">
                                                    {{ $blog->created_at->format('F') }}</li>
                                            </ul>
                                        </div>
                                        <div class="post-thumb thumb">
                                            @if ($blog->featured_image)
                                                <img src="{{ $blog->featured_image->getUrl() }}" alt=""
                                                    class="img-responsive img-fullwidth">
                                            @endif
                                        </div>
                                    </div>
                                    <div class="entry-content p-20 pr-10">
                                        <div class="entry-meta mt-0 no-bg no-border">
                                            <div class="event-content">
                                                <h4 class="entry-title text-white text-capitalize m-0"><a
                                                        href="{{ route('news', $blog->slug) }}">
                                                        {{ $blog->title ?? '' }}</a></h4>
                                            </div>
                                        </div>
                                        <p class="mt-10">
                                        <p class="mt-10">
                                            {!! sanitizeHtmlDescription(limitWord($blog->description, 180)) !!}
                                        </p>
                                        </p>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="bg-theme-colored p-5 text-center pt-10 pb-10">
                                        {{-- <span class="mb-10 text-white mr-10 font-13"><i
                                            class="fa fa-share-alt mr-5 text-white"></i>24 Share</span>
                                    <span class="mb-10 text-white mr-10 font-13"><i
                                            class="fa fa-commenting-o mr-5 text-white"></i> 214 Comments</span>
                                    <span class="mb-10 text-white mr-10 font-13"><i
                                            class="fa fa-heart-o mr-5 text-white"></i> 895 Likes</span> --}}
                                    </div>
                                </article>
                            </div>
                        @empty
                        @endforelse
                    </div>
                    <div class="d-flex justify-content-center">
                        <button class="load_more_button load-more-data">More News & Events</button>
                    </div>
                    <div class="auto-load text-center" style="display: none;">
                        <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="60" viewBox="0 0 100 100"
                            enable-background="new 0 0 0 0" xml:space="preserve">
                            <path fill="#000"
                                d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                                <animateTransform attributeName="transform" attributeType="XML" type="rotate"
                                    dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" />
                            </path>
                        </svg>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('script')
    <script>
        var ENDPOINT = "{{ route('news.all') }}";
        var page = 2;

        $(".load-more-data").click(function() {
            infinteLoadMore(page);
            page++;
        });

        function infinteLoadMore(page) {
            $.ajax({
                    url: ENDPOINT + "?page=" + page,
                    datatype: "json",
                    type: "get",
                    beforeSend: function() {
                        $('.auto-load').show();
                    }
                })
                .done(function(response) {
                    if (response.html == '') {
                        $('.auto-load').html("We don't have more data to display.");
                        $('.load-more-data').hide();
                        return;
                    }
                    $('.auto-load').hide();
                    $("#data-wrapper").append(response.html);
                })
                .fail(function(jqXHR, ajaxOptions, thrownError) {
                    console.log('Server error occurred');
                });
        }
    </script>
@endpush