@extends('index')

@section('content')
    <section class="mb-5">
        <div class="container">
            <ul class="d-flex my-5 color_808080">
                <li>最新消息</li>
            </ul>

            <picture>
                <source media="(max-width: 991.98px)" srcset="{{asset('images/NewsTopMb.jpg')}}">
                <img class="img-fluid" src="{{asset('images/NewsTopPc.jpg')}}" alt="">
            </picture>
            <div class="NewsBox">
                <h1 class="Title">最新消息</h1>
                <div id="NewsList" class="NewsCenter">
                    @include('newsItem', ['news_list' => $news_list])
                </div>
            </div>
            <div id="loadStatus" class="text-center my-4" style="display: none;">
                <span id="loadingText">載入中...</span>
            </div>
        </div>
    </section>
@endsection

@section('javascript')
    <script>
        let nextPage = 2;
        let loading = false;
        let hasMore = true;

        $(window).on('scroll', function () {
            if (!loading && hasMore && $(window).scrollTop() + $(window).height() >= $(document).height() - 10) {
                loading = true;
                $('#loadStatus').show();
                $('#loadingText').text('載入中...');

                setTimeout(function(){
                    $.get(`/news?page=` + nextPage, function (res) {
                        $('#NewsList').append(res.html);
                        hasMore = res.hasMore;

                        if (!hasMore) {
                            $('#loadingText').text('最新消息已載入完畢');
                        } else {
                            $('#loadStatus').hide(); // 若你希望只顯示文字可不 hide
                        }

                        nextPage++;
                        loading = false;
                    });
                }, 400);
            }
        });
    </script>

@endsection