@extends('layouts.master', ['title' => 'All Notification'])

@push('meta')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush

@section('content')
    <div class="page-content-inner">
        <div class="personal-dashboard personal-dashboard-v1">
            <div class="datatable-toolbar">
                <div class="field has-addons">
                    <div class="control has-icon mr-3" style="width:300px">
                        <input type="text" placeholder="Search..." id="search_notification" class="datatable-filter input">
                        <div class="form-icon">
                            <i data-feather="search"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="timeline-wrapper">
                <div class="timeline-header"></div>
                <div class="timeline-wrapper-inner">
                    <div class="timeline-container" id="timeline_notification"></div>
                    <div id="loader"></div>
                    <div class="has-text-centered">
                        <button class="button h-button is-warning" id="load_more" style="display: none"
                            data-url="{{ route('notification.datatable', ['page' => 2]) }}">
                            Load More
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
    <script src="{{ asset('assets/js/table-loader.js') }}"></script>
    <script src="{{ asset('assets/js/pagination/Paginate.js') }}"></script>
    <script src="{{ asset('assets/js/pagination/change-perpage.js') }}"></script>
    <script>
        const params = {
            page: 1
        }

        let button = $('#load_more');

        function datatable() {

            $.ajax({
                url: '{{ route('notification.datatable') }}',
                data: params,
                success: (res) => {
                    if (res.total >= 10) {
                        button.show()
                    }
                    $('#timeline_notification').html(res.notifications);
                }
            })
        }

        $('#load_more').on('click', function() {
            let button = $(this);
            let url = button.data('url');

            if (!url) {
                button.hide();
                return;
            }

            button.prop('disabled', true).text('Loading...');

            $.get(url, function(res) {
                $('#timeline_notification').append(res.notifications);

                if (res.next_page_url) {
                    button.data('url', res.next_page_url);
                } else {
                    button.hide();
                }

                button.prop('disabled', false).text('Load More');

            });
        });

        searchKeyword('#search_notification', 1000, function() {
            datatable()
        });

        $(document).ready(function() {
            datatable()
            changePerpage(datatable)
        })
    </script>
@endpush