// Fetch Wilayah JSON
fetch("/assets/json/home/wilayah.json")
.then((response) => response.json())
.then((data) => populateFilters(data))
.catch((error) => console.error("Gagal load wilayah.json:", error));
function populateFilters(data) {
populateSelect("kabkota", data.kabkota);
populateSelect("kecamatan", data.kecamatan);
populateSelect("kelurahan", data.kelurahan);
}
function populateSelect(id, options) {
const select = document.getElementById(id);
if (!select) return;
select.innerHTML = options
.map(
(opt) => `
`
)
.join("");
}
// Fetch Layanan JSON
document.addEventListener("DOMContentLoaded", function () {
fetch("/assets/json/home/layanan.json")
.then((response) => response.json())
.then((data) => {
initializeLayanan(data);
setupUIHandlers();
})
.catch((error) => console.error("Gagal load layanan.json:", error));
});
function initializeLayanan(data) {
renderHeader(data.header);
renderTabs(data.tabs);
renderContents(data.contents);
changeTab("pertek");
}
// Data Header
function renderHeader(header) {
const headerContainer = document.querySelector("#layanan-header");
if (!headerContainer) return;
headerContainer.innerHTML = `
${header.title}
${header.subtitle}
`;
}
// Data Tabs
function renderTabs(tabs) {
const tabsContainer = document.querySelector("#layanan-tabs");
if (!tabsContainer) return;
tabsContainer.innerHTML = tabs
.map(
(tab) => `
`
)
.join("");
}
// Data Contents
function renderContents(contents) {
const contentsContainer = document.querySelector("#layanan-contents");
if (!contentsContainer) return;
contentsContainer.innerHTML = Object.entries(contents)
.map(([key, items]) => {
if (key === "audit") {
return `
${renderAuditTable(items)}
`;
} else {
return `
${items.map((item) => renderStandardItem(item)).join("")}
`;
}
})
.join("");
}
function renderStandardItem(item) {
return `
${item.periode}
`;
}
function renderAuditTable(items) {
return `
| No |
Nama PT |
Judul |
Deskripsi |
Aksi |
${items
.map(
(item) => `
| ${item.no} |
${item.company} |
${item.title} |
${item.description}
|
|
`
)
.join("")}
`;
}
function setupUIHandlers() {
// Toggle filter section
const filterButton = document.getElementById("filter-button");
if (filterButton) {
filterButton.addEventListener("click", function () {
const filterSection = document.getElementById("filter-section");
if (filterSection) filterSection.classList.toggle("hidden");
});
}
// Clear filter inputs
const clearButton = document.getElementById("clear-filter");
if (clearButton) {
clearButton.addEventListener("click", function () {
document.getElementById("kabkota").value = "";
document.getElementById("kecamatan").value = "";
document.getElementById("kelurahan").value = "";
const searchInput = document.querySelector(
'input[placeholder="Search"]'
);
if (searchInput) searchInput.value = "";
});
}
}
// Tab switching function
function changeTab(tabName) {
const contentSections = document.querySelectorAll(".tab-content");
contentSections.forEach((section) => {
section.classList.add("hidden");
});
const tabButtons = document.querySelectorAll(".tab-btn");
tabButtons.forEach((button) => {
button.classList.remove("bg-blue-900", "text-white");
button.classList.add("bg-white", "border", "border-gray-300");
});
const selectedTab = document.getElementById("tab-" + tabName);
if (selectedTab) {
selectedTab.classList.remove("bg-white", "border", "border-gray-300");
selectedTab.classList.add("bg-blue-900", "text-white");
}
const selectedContent = document.getElementById("content-" + tabName);
if (selectedContent) {
selectedContent.classList.remove("hidden");
}
}