/**
 * Template Name: Inspinia - Admin & Dashboard Template
 * By (Author): WebAppLayers
 * Module/App (File Name): Datatables Scroll
 */

function initSelectableDataTable(selector, selectOptions = {}) {
    const tableElement = document.querySelector(selector)
    if (tableElement) {
        new DataTable(tableElement, {
            pageLength: 7,
            lengthMenu: [7, 10, 25, 50, -1],
            select: selectOptions,
            language: {
                paginate: {
                    first: '<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 7l-5 5l5 5" /><path d="M17 7l-5 5l5 5" /></svg>',
                    previous: '<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>',
                    next: '<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>',
                    last: '<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7l5 5l-5 5" /><path d="M13 7l5 5l-5 5" /></svg>',
                },
                lengthMenu: "_MENU_ Companies per page",
                info: 'Showing <span class="font-semibold">_START_</span> to <span class="font-semibold">_END_</span> of <span class="font-semibold">_TOTAL_</span> Companies',
            },
        })
    }
}

document.addEventListener("DOMContentLoaded", function () {
    initSelectableDataTable("#single-select", { style: "single" })
    initSelectableDataTable("#multi-select", { style: "multi" })
    initSelectableDataTable("#cell-select", { style: "os", items: "cell" })
})
