@extends('index')

@section('content')
    <section>
        <div class="container mb-5">
            <h1 class="title_2 color_77832A mb-4 mt-5">搜尋結果</h1>
            <p class="color_959595">10個 <span class="color_77832A">高山茶</span> 的搜尋結果</p>
            <div>
                <div id="SearchResultList" class="row">
                    @include('productItem', ['products' => $products])
                </div>
                <div id="loadStatus" class="text-center my-4" style="display: none;">
                    <span id="loadingText">載入中...</span>
                </div>
            </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(`/search?keyword={{$keyword}}&page=` + nextPage, function (res) {
                        $('#SearchResultList').append(res.html);
                        hasMore = res.hasMore;

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

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

@endsection