document.addEventListener("DOMContentLoaded", function(event) {
	if(document.querySelectorAll("#datatableStorefront").length) {
		(async () => {
			let columnsData = await fetch(routes.getStorefrontsDatatableColumns).then(response => response.json()).catch(console.log);
			initDatatable(columnsData);
		})();
	}
});

function initDatatable(columnsData) {
	$('#datatableStorefront').DataTable({
		"processing": true,
        "serverSide": true,
        "ajax": routes.storefrontsServerProcessing,
		columns: columnsData['columns'],
		fixedHeader: true,
		fixedColumns: { left: 3 },
		"autoWidth": false,
		"order": [[ 0, "desc" ], [ 1, "asc" ], [ 2, "asc" ]],
		"columnDefs": [
			{
                "targets": columnsData['hidden_columns'],
                "visible": false
            },
			{
				searchPanes: {show: false},
				targets: columnsData['hidden_panes']
			},
			{
				"targets": columnsData['coloured'],
				"createdCell": function (td, cellData, rowData, row, col) {
					if (cellData == 'OK' )
						$(td).css('background-color', 'rgba(39, 204, 22, 0.5)')
					else
						$(td).css('background-color', 'rgba(255, 0, 0, 0.5)')
				}
			}
		],
		searchPanes: { threshold: 1 },
		dom: 'BPQlfrtip',
		"pageLength": 100,
		buttons: [
			{
				extend: 'colvis',
				collectionLayout: 'fixed two-column'
			},
			{
				extend: 'collection',
				text: 'Export',
				buttons: ['excel', 'csv']
			}
		]
	});
}