@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- Start section -->
        <section class="blog_pg section">
            <div class="container">
                <div class="search_box mb-5 pb-3 col-lg-8 m-auto">
                    <form method="get">
                        <div class="form-group">
                            <input type="text" required
                                   name="search"
                                   value="{{ request('search') }}"
                                   class="form-control"
                                   placeholder="{{ __('articles.search_news_articles') }} ..." />
                            <button type="submit" class="search_butn">
                                <i class="far fa-search"></i>
                            </button>
                        </div>
                    </form>
                </div>

                <div class="row" id="items-wrapper">
                    @if($articles->count())
                        @foreach($articles as $article)
                            <div class="col-lg-4">
                                @include('web.articles._article_card')
                            </div>
                        @endforeach
                    @else
                        <div class="col-lg-12">
                            <div class="alert alert-info text-center">{{ __('general.no_results') }}</div>
                        </div>
                    @endif
                </div>
                @if($articles->hasPages())
                    <a href="javascript:;" id="load_more_btn" class="butn primary_butn mt-4 m-auto">
                        {{ __('main.more') }}
                        <i class="fas fa-long-arrow-left me-0 ms-2"></i>
                    </a>
                @endif
            </div>
        </section>
    </main>

@endsection

@push('stack_scripts')
    <script>
        const doc2 = $(document);
        const fullUrl = '{!! url()->full() !!}';
        const queryCount = Number('{{ request()->query->count() }}');

        //start load more button
        let page = 1;
        let loadMoreBtn = $('#load_more_btn');

        doc2.on('click', '#load_more_btn', function(e) {
            page++;
            loadMoreData(page);
        });

        function loadMoreData(page=1) {
            let separator = queryCount === 0 ? '?' : '&';
            $.ajax({
                url: fullUrl + `${separator}page=` + page,
                type: 'get',
                datatype: 'JSON',
                beforeSend: function() {
                    disableLoadMoreButton();
                },
                complete: function() {
                    resetLoadMoreButton();
                },
                success: function (response) {
                    //console.log(response);return;
                    $('#items-wrapper').append(response.html);
                    if(!response.hasNextPage){
                        loadMoreBtn.hide();
                    }
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    const jsonResponse = JSON.parse(xhr.responseText);
                    let errorMsg = jsonResponse.message || 'Error';
                    toasterError(errorMsg);
                }
            });
        }
        //end load more button

        function disableLoadMoreButton()
        {
            let btn = loadMoreBtn;
            btn.prop("disabled", true);
            btn.html('{{ __('general.please_wait') }} <span><img src="{{ asset('assets/admin/images/loading.gif') }}" width="20" alt="photo"></span>');
        }

        function resetLoadMoreButton()
        {
            let btn = loadMoreBtn;
            btn.prop("disabled", false);
            let html = '{{ __('main.more') }} <i class="fas fa-long-arrow-left me-0 ms-2"></i>';
            btn.html(html);
        }
    </script>
@endpush