var bookingdata;

function createDtOverviewBookings(){
    document.bookings = new simpleDatatables.DataTable("#bookings", {
        searchable: false,
        paging: false,
        data: {
            headings: ["","Datum","Empfänger","Betrag"],
            data: bookingdata,
        },
        rowRender: (row, tr, _index) => {
            //tr.childNodes[1].childNodes[0].attributes.href = `editBill/${row.cells[0].data}`;
            tr.childNodes[1].attributes.onclick = `location.href='editBill/${row.cells[0].data}'`;
//            tr.childNodes[2].attributes.onclick = `collapseDetails(this, ${_index})`;
        },
        classes: {
            active: "active",
            disabled: "disabled",
            table: "table table-striped table-sm",
        },
        columns: [
            {
                select:0,
               // render: (data, _cell, _dataIndex, _cellIndex) => { return `<a data-bs-toggle="modal" role="button" data-bs-id="'${data}'" data-bs-target="#mymodal" ><i class="fa-solid fa-trash"></a>` },
                cellClass: "datatable-icon",
                type: "number",
                hidden:true,
            },{
                select:1,
                type: 'date',
                format: 'dd.mm.yyyy',
                cellClass:"dt-datum",
                sortable: true,
                sort: "desc",
            },{
                select:2,
                type: 'string',
                cellClass:"dt-receiver",
               // render: (data, _cell, _dataIndex, _cellIndex) => { return `<a onclick="collapseDetails(this,document.bookings)">${data}</a>` },
                
            },{
                select:3,
                type: 'number',
                headerClass: "dt-amount",
                cellClass:"dt-amount",
                render: renderAmount
            }
        ],
        template: (options, dom) => `<div class='${options.classes.top}'>
                <div class='float-start'>
                    <a class="btn btn-sm btn-secondary" href="newBill">Neue Rechnung</a>
                    <a class="btn btn-sm btn-secondary" href="newTransfer">Neuer Transfer</a>
                </div>
                </div>
                <div class='${options.classes.container}'${options.scrollY.length ? ` style='height: ${options.scrollY}; overflow-Y: auto;'` : ""}></div>
                <div class='${options.classes.bottom}'>
            </div>`
    });
    loadOverviewData();
}

function loadOverviewData(){
    document.bookings.setMessage("Loading Data");
    fetch("/getOverviewData", { method: "GET",headers: {"X-Requested-With": "XMLHttpRequest"},})
        .then(response => {
            let status = response.statusText;
            if (!response.ok) {
                throw "HTTP error: " + response.status + "; " + status;
            } else
                return response.json();
        })
        .then(data => {            
            if (document.bookings.hasRows){
                document.bookings.data.data.splice(0,document.bookings.data.data.length);
                document.bookings.hasRows = false;
            }
            //document.bookings.insert({data:data});
            document.bookings.insert({data:data.map(item => [item.id,item.datum,item.receiver,item.amount])});
            document.bookings.update(true);
        })
        .catch(err => {
            document.bookings.setMessage(err);
        });
}

document.addEventListener("DOMContentLoaded", function(event) {
    createDtOverviewBookings();
});