jQuery(function($){

    let formipay_table_grid = new gridjs.Grid({
        server: {
            url: formipay_customers_page.ajax_url+'?action=formipay-tabledata-customers&limit='+document.getElementById('limit').value+'&keyword='+document.getElementById('keyword').value,
            then: data => {
                
                // if(data.posts_report){
                //     processPostsReport(data.posts_report);
                // }

                return data.results.map(
                    form => [form.ID, form.name, form.email, form.phone, form.total_order]
                );
            },
            total: data => data.total
        },
        columns: [
            {
                name: formipay_customers_page.columns.id,
                width: '75px'
            },
            {
                name: formipay_customers_page.columns.name,
                formatter: (_, row) => gridjs.html(`
                    <b>${_}</b>
                `)
            },
            {
                name: formipay_customers_page.columns.email,
            },
            {
                name: formipay_customers_page.columns.phone,
            },
            {
                name: formipay_customers_page.columns.total_order,
                formatter: (total_order, row) => gridjs.html(`<span class="status-label ${total_order}">${total_order}</span>`)
            }
        ],
        pagination: {
            limit: document.getElementById('limit').value,
            server: {
                url: (prev, page, limit) => `${prev}&limit=${limit}&offset=${page * limit}`
            },
            summary: false
        },
        className: {
            table: 'formipay-grid-table'
        }
    }).render(document.getElementById('formipay-customers'));

    $('#limit, #keyword').on('change', function(){
        formipay_table_grid.updateConfig({
            server: {
                url: formipay_customers_page.ajax_url+'?action=formipay-tabledata-customers&limit='+document.getElementById('limit').value+'&keyword='+document.getElementById('keyword').value,
                then: data => data.results.map(
                    form => [form.ID, form.name, form.email, form.phone, form.total_order]
                ),
                total: data => data.total
            },
            pagination: {
                limit: document.getElementById('limit').value,
                server: {
                    url: (prev, page, limit) => `${prev}&limit=${limit}&offset=${page * limit}`
                },
                summary: false
            },
        }).forceRender();
    });

    $(document).on('mouseover', 'td[data-column-id=form]', function(){
        $(this).find('.post-action').css('visibility', 'visible');
    });
    $(document).on('mouseleave', 'td[data-column-id=form]', function(){
        $(this).find('.post-action').css('visibility', 'hidden');
    });

});