ajax order, filter category post, load more

/js
jQuery(document).ready(function($) {
    $('.option-order ul').hide();

    // Toggle ul khi click vào option
    $('.option-order .option').on('click', function(e) {
        e.preventDefault();
        $(this).siblings('ul').slideToggle(200);
    });

    // Xử lý khi chọn li trong option-order
    $('.option-order ul li').on('click', function() {
        var selectedText = $(this).text();
        var order = $(this).data('order');
        var $option = $(this).closest('.option-order').find('.option');
        var $container = $(this).closest('.last-blog, .all-list-blog');
        var $listBlog = $container.find('.list-blog');
        var categorySlug = $('.list-cate .active').data('slug');

        $option.text(selectedText);
        $(this).parent().slideUp(200);

        var isLatest = $container.hasClass('last-blog');
        var args = {
            post_type: 'post',
            posts_per_page: isLatest ? 3 : 9,
            orderby: 'date',
            order: order,
            offset: (isLatest || order === 'DESC') ? (isLatest ? 0 : 3) : 0,
            category_name: categorySlug === 'all' ? '' : categorySlug
        };

        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            data: {
                action: 'load_posts_by_order',
                query_args: args,
                is_latest: isLatest
            },
            beforeSend: function() {
                $listBlog.addClass('loading'); // Thêm class loading
            },
            success: function(response) {
                $listBlog.removeClass('loading').html(response); // Xóa class và cập nhật
            }
        });
    });

    // Đóng ul khi click ngoài
    $(document).on('click', function(e) {
        if (!$(e.target).closest('.option-order').length) {
            $('.option-order ul').slideUp(200);
        }
    });

    // Xử lý lọc theo category
    $('.list-cate ul li a').on('click', function(e) {
        e.preventDefault();
        $('.list-cate .active').removeClass('active');
        $(this).addClass('active');
        var categorySlug = $(this).data('slug');

        $('.last-blog, .all-list-blog').each(function() {
            var $container = $(this);
            var $listBlog = $container.find('.list-blog');
            var isLatest = $container.hasClass('last-blog');
            var order = $container.find('.option-order .option').text() === 'Newest' ? 'DESC' : 'ASC';

            var args = {
                post_type: 'post',
                posts_per_page: isLatest ? 3 : 9,
                orderby: 'date',
                order: order,
                offset: (isLatest || order === 'DESC') ? (isLatest ? 0 : 3) : 0,
                category_name: categorySlug === 'all' ? '' : categorySlug
            };

            $.ajax({
                url: '/wp-admin/admin-ajax.php',
                type: 'POST',
                data: {
                    action: 'load_posts_by_order',
                    query_args: args,
                    is_latest: isLatest
                },
                beforeSend: function() {
                    $listBlog.addClass('loading'); // Thêm class loading
                },
                success: function(response) {
                    $listBlog.removeClass('loading').html(response); // Xóa class và cập nhật
                }
            });
        });
    });

    // Xử lý load thêm bài viết cho All Blog List
    $('.btn-see-more').on('click', function(e) {
        e.preventDefault();
        var $listBlog = $('.all-list-blog .list-blog');
        var currentOffset = $listBlog.find('.box-blog').length;
        var order = $('.all-list-blog .option-order .option').text() === 'Newest' ? 'DESC' : 'ASC';
        var categorySlug = $('.list-cate .active').data('slug');

        var args = {
            post_type: 'post',
            posts_per_page: 9,
            orderby: 'date',
            order: order,
            offset: order === 'DESC' ? currentOffset + 3 : currentOffset,
            category_name: categorySlug === 'all' ? '' : categorySlug
        };

        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            data: {
                action: 'load_posts_by_order',
                query_args: args,
                is_latest: false
            },
            beforeSend: function() {
                $listBlog.addClass('loading'); // Thêm class loading
                $('.btn-see-more').text('Loading...');
            },
            success: function(response) {
                $listBlog.removeClass('loading'); // Xóa class loading
                if (response.trim()) {
                    $listBlog.append(response);
                    $('.btn-see-more').text('See more posts');
                } else {
                    $('.btn-see-more').text('No more posts');
                }
            }
        });
    });
});


/css loadding
.list-blog {
    position: relative;
}

.list-blog.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7); /* Nền mờ */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-blog.loading::before {
    content: '';
    width: 40px;
    height: 40px;
    border: 4px solid #ccc;
    border-top: 4px solid #007bff; /* Màu vòng xoay */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}