@extends('frontend3')

@section('content')

    <div id="siteContent" class="site-content">
        <div class="container">
            <div class="notification-section mt-24 mb-48">
                <div class="section-header">
                    <div class="flex flex-ai-center flex-jc-between">
                        <div class="flex-item pr-8">
                            <h1 class="section-header__title">Thông báo <span class="ntf-count">{{ $cnt }}</span></h1>
                        </div>
                        <div class="flex-item pr-8">
                            <a href="#" class="no-udl fz-14" id="seen-all">Đánh dấu tất cả là đã đọc</a>
                        </div>
                    </div>
                </div>
                <div class="section-content ht-depth-1">
                    <div class="list-ntfs" id="main-list">

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>

    var page = 1;

    $('#seen-all').click(function(e) {
        e.preventDefault();
        $.ajax({
            url: '{{ url('seen-all-notifications') }}',
            type: 'post',
            dataType: 'json',
            success: function (response) {
                $('#main-list').find('.single-ntf').removeClass('single-ntf--unread');
            }
        });
    });

    $(document).ready(function () {

        $.ajax({
            url: '{{ url('notifications') }}',
            data: {
                page: page
            },
            type: 'get',
            dataType: 'json',
            success: function (response) {
                $('#main-list').append(response.html);
            }

        });


    });

    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            page++;
            $.ajax({
                url: '{{ url('notifications') }}',
                type: 'get',
                data: {
                    page: page
                },
                dataType: 'json',
                success: function (response) {
                    $('#main-list').append(response.html);
                }
            });

        }
    });


</script>
@endpush