// Fungsi "Pabrik" untuk membuat dan mendandani tabel
function initCustomTable(tableId) {
    let tableElement = document.getElementById(tableId);

    // Cek dulu, kalau elemen tabelnya gak ada di HTML, stop (biar ga error)
    if (!tableElement) return;

    // 1. Inisialisasi DataTable pada elemen tersebut
    let dataTable = new simpleDatatables.DataTable(tableElement);

    // --- MULAI BAGIAN STYLING BAWAAN KAMU (Moved inside function) ---

    // Move "per page dropdown" selector element out of label
    // to make it work with bootstrap 5. Add bs5 classes.
    function adaptPageDropdown() {
        const selector = dataTable.wrapper.querySelector(".dataTable-selector")
        selector.parentNode.parentNode.insertBefore(selector, selector.parentNode)
        selector.classList.add("form-select")
    }

    // Add bs5 classes to pagination elements
    function adaptPagination() {
        const paginations = dataTable.wrapper.querySelectorAll(
            "ul.dataTable-pagination-list"
        )

        for (const pagination of paginations) {
            pagination.classList.add(...["pagination", "pagination-primary"])
        }

        const paginationLis = dataTable.wrapper.querySelectorAll(
            "ul.dataTable-pagination-list li"
        )

        for (const paginationLi of paginationLis) {
            paginationLi.classList.add("page-item")
        }

        const paginationLinks = dataTable.wrapper.querySelectorAll(
            "ul.dataTable-pagination-list li a"
        )

        for (const paginationLink of paginationLinks) {
            paginationLink.classList.add("page-link")
        }
    }

    const refreshPagination = () => {
        adaptPagination()
    }

    // Patch "per page dropdown" and pagination after table rendered
    dataTable.on("datatable.init", () => {
        adaptPageDropdown()
        refreshPagination()
    })
    dataTable.on("datatable.update", refreshPagination)
    dataTable.on("datatable.sort", refreshPagination)

    // Re-patch pagination after the page was changed
    dataTable.on("datatable.page", adaptPagination)

    // --- SELESAI BAGIAN STYLING ---
}

// 2. PANGGIL FUNGSI UNTUK KEDUA TABEL KAMU
// Sesuaikan string ini dengan ID di HTML "FIX" kamu
initCustomTable("riwayat-buket");
initCustomTable("riwayat-foto");
initCustomTable("table1");


// 3. FIX TAMBAHAN (Wajib ada biar tabel di Tab ke-2 tidak gepeng)
document.querySelectorAll('a[data-bs-toggle="pill"]').forEach(function (triggerEl) {
    triggerEl.addEventListener('shown.bs.tab', function (event) {
        window.dispatchEvent(new Event('resize'));
    });
});