<br><br><br><br>

<div class="card" id="primary-card">
    <div class="card-header ui-sortable-handle" style="cursor: move">
        <h1 class="card-title" style="font-size: 2.5rem;">Accounting Reports</h1>
        <div class="card-tools">
        </div>
    </div>
    <div class="card-body">
        <table id="accounting_reports_list_table">
            <thead>
                <tr>
                    <th>
                        Report
                    </th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>

<style>
    /* Style each row as a button */
    .dataTable tbody tr {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .3rem;
    }


</style>


<script>



    function GenerateAccountingReportsListRow(Name) { 
        var parts = Name.split('-');

// Assign the parts to variables
var text = parts[0];
var value = parts[1];

        return `<tr> <td><center><button class="btn-block btn-lg" onclick="ButtonGo('${value}',0);">${text}</button></center></td> </tr>`; }

    async function GenerateAccountReportsListRows(responsearray) {
        let newhtmltable = [];

        for (let i = 0; i < responsearray.length; i++) { newhtmltable.push(GenerateAccountingReportsListRow(responsearray[i])); }

      
        $("#accounting_reports_list_table").find("tbody").html(newhtmltable.join(''));

        let reportslist = $("#accounting_reports_list_table").DataTable({
            "destroy": true,
            order: [[0, 'desc']],
            pageLength: 5,
            lengthMenu: [[5], [5]]
        });


        

        $('#primary-card').fadeIn(200);

    }


    function GenerateAccountingReportsListTable() {
        AjaxDo('?AccountingReports/List', null, GenerateAccountReportsListRows, null, reqtype = 'POST');
    }


    GenerateAccountingReportsListTable();



</script>