@extends('.frontend.default')
@section('content')
    <div class="container" style="padding-top: 40px;">

        <div id="news_index">

            <div id="news_index_header" class="row" style="padding-bottom: 65px;">
                <div class="col-6">
                    <h1 class="static-title" style="vertical-align: -webkit-baseline-middle;vertical-align: center;display: inline-block;">最新消息 </h1>
                </div>
                <div class="col-6">
                    <div class="sort_newes">
                        <div class="sort_select text-right m-0">
                            <select id="news_index_news_sort_select" class="form-select" aria-label="news_index_news_sort_select">
                                <option value="desc" selected="">按新至舊排序</option>
                                <option value="asc">按舊至新排序</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div id="news_index_body_news_list" class="row">
            </div>

            <h1 id="news_index_footer_null_news_message" style="display:none">
                未找到相關最新消息
            </h1>

            <div id="news_index_footer" class="text-center" style="height: 150px">
                <div id="news_index_footer_content" class="more_btn text-center">
                    <a class="text-color-base-5">
                        更多
                    </a>
                </div>
                <i id="news_index_footer_more_btn_loading" class="fa fa-spinner fa-pulse fa-2x" style="display:none"></i>
            </div>
        </div>
    </div>
@endsection

@section('pagescript')
    <script>
        var news_index_page = {
            'ready': function () {
                news_index_page.next_news_url = news_index_page.default_next_news_url;

                news_index_page.getNews();
                $('#news_index_footer .more_btn').click(function () {
                    news_index_page.getNews();
                });

                $('#news_index_news_sort_select').change(function () {
                    $('#news_index_footer_null_news_message').hide();
                    $('#news_index_footer_more_btn_loading').show();

                    news_index_page.news_sort = $(this).val();

                    $(news_index_page.news_index_body_news_list_name).html('');
                    news_index_page.next_news_url = news_index_page.default_next_news_url + '?news_sort=' + news_index_page.news_sort;

                    news_index_page.getNews();
                });
            },
            'news_index_body_news_list_name': '#news_index_body_news_list',
            'news_sort': "desc",
            'default_next_news_url': "{{ route('.api.news.get_last_news') }}",
            'next_news_url': "",
            'getNews': function () {
                news_index_page.toggleMoreButton();

                //update current url but no reload
                window.history.replaceState(null, document.title, window.location.href.split('?')[0] + (news_index_page.next_news_url.split('?').length > 1 ? '?' +  news_index_page.next_news_url.split('?')[1] : ''));
                $.get(news_index_page.next_news_url, function (data) {
                    if(!data['html_array'] || data['html_array'].length == 0){
                        $('#news_index_footer_null_news_message').show();
                        $('#news_index_footer_more_btn_loading').hide();
                        return;
                    }

                    data['html_array'].forEach(function (html) {
                        news_index_page.addNews(news_index_page.news_index_body_news_list_name, html)
                    });

                    if (data['next_news_url']) {
                        news_index_page.next_news_url = data['next_news_url'] + '&news_sort=' + news_index_page.news_sort;
                        news_index_page.toggleMoreButton();
                    } else {
                        $('#news_index_footer_more_btn_loading').hide();
                    }
                })
            },
            'addNews': function (target_name, news_html) {
                let target = $(target_name);

                news_html = '<div class="col-12 col-sm-6 col-lg-4 mb-5">' + news_html + '</div>';
                target.append(news_html)
            },
            'toggleMoreButton': function () {
                $('#news_index_footer .more_btn').toggle();
                $('#news_index_footer_more_btn_loading').toggle();
            }
        }

        $(document).ready(function () {
            news_index_page.ready();
        });
    </script>
@endsection