llhd/wwwroot/webnew/pages/layanan/detail-layanan.js

let currentPage = {};
const rowsPerPage = 5;

function getQueryParam(name) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(name);
}

function changeService(btn, jenis) {
    window.history.pushState({}, "", `/WebNew/Layanan?jenis=${jenis}`);

    document.querySelectorAll('.service-btn').forEach(b => b.classList.remove('active'));
    if (btn) btn.classList.add('active');

    loadData(jenis);
}

function loadData(jenis) {

    if (!jenis) jenis = "air";

    document.getElementById("judul").innerText = "Loading...";

    fetch(`/WebNew/Layanan/GetData?jenis=${encodeURIComponent(jenis)}`)
        .then(res => res.json())
        .then(data => {

            // Informasi layanan
            document.getElementById("judul").innerText =
                data.judul || "-";

            document.getElementById("gambar").src =
                data.gambar || "";

            document.getElementById("deskripsi-singkat").innerText =
                data["deskripsi-singkat"] || "";

            // Deskripsi list
            let desc = "";

            (data.deskripsi || []).forEach(d => {
                desc += `<li>${d}</li>`;
            });

            document.getElementById("deskripsi").innerHTML = desc;


            const judulTable1 =
                document.getElementById("judul-table1");

            const judulTable2 =
                document.getElementById("judul-table2");

            if (judulTable1) {
                judulTable1.innerText =
                    data.judulTable1 || "Info Harga Baku Mutu";
            }

            if (judulTable2) {
                judulTable2.innerText =
                    data.judulTable2 || "Info Harga Per Parameter";
            }

            renderTable("table1", data.table1);
            renderTable("table2", data.table2);

            setupPagination("table1");
            setupPagination("table2");

        })
        .catch(error => {

            console.error(error);

            document.getElementById("judul").innerText =
                "Data tidak ditemukan";
        });
}
document.addEventListener("DOMContentLoaded", function () {

    let jenis = getQueryParam("jenis") || "air";

    loadData(jenis);

    document.querySelectorAll('.service-btn').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.jenis === jenis);
    });

    setupSearch("searchTable-harga", "table1");
    setupSearch("searchTable-parameter", "table2");
});

function renderTable(tableId, tableData) {

    if (!tableData) return;

    let thead = "<tr>";
    (tableData.columns || []).forEach(col => {
        thead += `<th>${col}</th>`;
    });
    thead += "</tr>";

    document.querySelector(`#${tableId} thead`).innerHTML = thead;

    let tbody = "";

    (tableData.data || []).forEach(row => {
        tbody += "<tr>";

        (tableData.fields || []).forEach(field => {
            let value = row[field] ?? "-";

            if (typeof value === "number" && field.toLowerCase().includes("harga")) {
                value = "Rp " + value.toLocaleString();
            }

            if (field === "aksi") {
                value = `
                        <a href="/WebNew/Layanan/DetailItem?kode=${row.kode}"
                           class="btn btn-sm btn-primary rounded-pill">
                           Detail
                        </a>
                    `;
            }

            tbody += `<td>${value}</td>`;
        });

        tbody += "</tr>";
    });

    document.querySelector(`#${tableId} tbody`).innerHTML = tbody;
}

function setupPagination(tableId) {

    const rows = Array.from(document.querySelectorAll(`#${tableId} tbody tr`))
        .filter(row => row.style.display !== "none");

    let container = document.getElementById(`pagination-${tableId}`);

    if (!container) {
        container = document.createElement("div");
        container.id = `pagination-${tableId}`;
        container.className = "pagination-wrapper";

        document.querySelector(`#${tableId}`).parentElement.appendChild(container);
    }

    const totalRows = rows.length;
    const totalPages = Math.ceil(totalRows / rowsPerPage) || 1;

    let page = 1;

    function showPage(p) {

        page = p;

        rows.forEach((row, i) => {
            row.style.display =
                i >= (p - 1) * rowsPerPage &&
                    i < p * rowsPerPage
                    ? ""
                    : "none";
        });

        render();
    }

    function render() {

        container.innerHTML = "";

        const start = totalRows === 0
            ? 0
            : (page - 1) * rowsPerPage + 1;

        const end = Math.min(page * rowsPerPage, totalRows);

        const info = document.createElement("div");
        info.className = "pagination-info";
        info.innerText = `Showing ${start}-${end} of ${totalRows}`;

        const controls = document.createElement("div");
        controls.className = "pagination-controls";

        // Tombol Previous
        const prev = document.createElement("button");
        prev.innerHTML = '<i class="bi bi-chevron-left"></i>';
        prev.className = "page-btn" + (page === 1 ? " disabled" : "");
        prev.disabled = page === 1;
        prev.onclick = () => showPage(page - 1);

        controls.appendChild(prev);

        let pages = [];

        if (totalPages <= 5) {
            pages = [...Array(totalPages).keys()].map(i => i + 1);
        } else {

            pages = [1];

            if (page > 3)
                pages.push("...");

            for (
                let i = Math.max(2, page - 1);
                i <= Math.min(totalPages - 1, page + 1);
                i++
            ) {
                pages.push(i);
            }

            if (page < totalPages - 2)
                pages.push("...");

            pages.push(totalPages);
        }

        pages.forEach(p => {

            const btn = document.createElement("button");

            if (p === "...") {

                btn.innerText = "...";
                btn.className = "page-btn disabled";
                btn.disabled = true;

            } else {

                btn.innerText = p;
                btn.className = "page-btn" + (p === page ? " active" : "");
                btn.onclick = () => showPage(p);

            }

            controls.appendChild(btn);
        });

        // Tombol Next
        const next = document.createElement("button");
        next.innerHTML = '<i class="bi bi-chevron-right"></i>';
        next.className = "page-btn" + (page === totalPages ? " disabled" : "");
        next.disabled = page === totalPages;
        next.onclick = () => showPage(page + 1);

        controls.appendChild(next);

        container.appendChild(info);
        container.appendChild(controls);
    }

    showPage(1);
}

function setupSearch(inputId, tableId) {

    const input = document.getElementById(inputId);

    input.addEventListener("keyup", function () {
        const keyword = input.value.toLowerCase();
        const rows = document.querySelectorAll(`#${tableId} tbody tr`);

        rows.forEach(row => {
            const text = row.innerText.toLowerCase();
            row.style.display = text.includes(keyword) ? "" : "none";
        });

        setupPagination(tableId);
    });
}

function exportTableToExcel(tableId) {

    const table = document.getElementById(tableId);

    if (!table || typeof XLSX === "undefined") {
        alert("Export gagal");
        return;
    }

    let jenis = getQueryParam("jenis") || "data";
    const tahun = new Date().getFullYear();

    jenis = jenis.toLowerCase().replace(/\s+/g, "-");

    const fileName = `${jenis}-${tableId}-${tahun}.xlsx`;

    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.table_to_sheet(table);

    XLSX.utils.book_append_sheet(wb, ws, "Data");

    XLSX.writeFile(wb, fileName);
}