// Fetch Wilayah dari API Database
fetch("/api/layanan/wilayah")
    .then((response) => response.json())
    .then((data) => populateFilters(data))
    .catch((error) =>
        console.error("Gagal load wilayah dari database:", 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;

    // Add default option
    let defaultOption =
        '<option value="">Semua ' +
        (id === "kabkota"
            ? "Kabupaten"
            : id === "kecamatan"
            ? "Kecamatan"
            : "Kelurahan") +
        "</option>";

    select.innerHTML =
        defaultOption +
        options
            .map(
                (opt) => `
    <option value="${opt.value}">${opt.label}</option>
  `
            )
            .join("");
}

// Fetch Layanan dari API Database
document.addEventListener("DOMContentLoaded", function () {
    fetch("/api/layanan/data")
        .then((response) => response.json())
        .then((data) => {
            initializeLayanan(data);
            setupUIHandlers();
        })
        .catch((error) =>
            console.error("Gagal load layanan dari database:", error)
        );
});

function initializeLayanan(data) {
    renderHeader(data.header);
    renderTabs(data.tabs);
    renderContents(data.contents);
    changeTab("amdal");
}

// Data Header
function renderHeader(header) {
    const headerContainer = document.querySelector("#layanan-header");
    if (!headerContainer) return;

    headerContainer.innerHTML = `
      <h1 class="text-2xl sm:text-4xl font-bold text-blue-900">${header.title}</h1>
      <p class="text-gray-700 mt-1 text-sm sm:text-base">${header.subtitle}</p>
    `;
}

// Data Tabs
function renderTabs(tabs) {
    const tabsContainer = document.querySelector("#layanan-tabs");
    if (!tabsContainer) return;

    tabsContainer.innerHTML = tabs
        .map(
            (tab) => `
      <button id="tab-${tab.id}"
              class="tab-btn bg-white border border-gray-300 px-3 sm:px-6 py-2 rounded text-sm sm:text-base"
              onclick="handleTabClick('${tab.id}')">
        ${tab.label}
      </button>
    `
        )
        .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 `
          <div id="content-${key}" class="tab-content hidden bg-white rounded overflow-hidden shadow">
            ${renderAuditTable(items)}
          </div>
        `;
            } else {
                return `
          <div id="content-${key}" class="tab-content hidden bg-blue-900 rounded overflow-hidden">
            ${items
                .map((item, index) => renderStandardItem(item, index))
                .join("")}
          </div>
        `;
            }
        })
        .join("");
}

function renderStandardItem(item, index) {
    return `
      <div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div class="flex gap-3 sm:gap-4 w-full">
          <div class="flex-shrink-0">
            <div class="bg-blue-500 p-2 rounded">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
            </div>
          </div>
          <div>
            <div class="text-blue-200 text-xs mt-1">
              <span class="bg-blue-700 px-2 py-1 rounded text-xs">${item.no_registrasi}</span>
              <span class="ml-2">${item.pemrakarsa}</span>
            </div>
            <h2 class="text-white font-bold text-sm sm:text-base mt-1 sm:mt-2 ">${item.title}</h2>
            <p class="text-blue-200 text-xs sm:text-sm">${item.description}</p>

          </div>
        </div>
        <div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
          <div class="text-white text-xs sm:text-sm text-right">${item.periode}</div>
          <button class="berikan-tanggapan-btn bg-green-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap"
                  data-item-id="${item.id}"
                  data-item-index="${index}"
                  data-item-title="${item.title}"
                  data-item-description="${item.description}"
                  data-item-periode="${item.periode}">
            Berikan Tanggapan
          </button>
        </div>
      </div>
    `;
}

function renderAuditTable(items) {
    return `
      <div class="overflow-x-auto">
        <table class="w-full text-xs sm:text-base">
          <thead>
            <tr class="bg-blue-800 text-white">
              <th class="py-2 sm:py-3 px-2 sm:px-4 text-left w-12 sm:w-16">No</th>
              <th class="py-2 sm:py-3 px-2 sm:px-4 text-left">Nama PT</th>
              <th class="py-2 sm:py-3 px-2 sm:px-4 text-left">Judul</th>
              <th class="py-2 sm:py-3 px-2 sm:px-4 text-left hidden md:table-cell">Deskripsi</th>
              <th class="py-2 sm:py-3 px-2 sm:px-4 text-center w-20 sm:w-32">Aksi</th>
            </tr>
          </thead>
          <tbody>
            ${items
                .map(
                    (item) => `
              <tr class="border-b border-gray-200">
                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">${item.no}</td>
                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">${item.company}</td>
                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">${item.title}</td>
                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top hidden md:table-cell">
                  <div class="max-h-24 sm:max-h-32 overflow-y-auto pr-2">${item.description}</div>
                </td>
                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">
                  <button class="bg-green-500 text-white px-2 sm:px-4 py-1.5 sm:py-2 rounded w-full text-xs sm:text-sm">Download</button>
                </td>
              </tr>
            `
                )
                .join("")}
          </tbody>
        </table>
      </div>
    `;
}

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 = "";

            // Reload original data
            loadOriginalData();
        });
    }

    // Apply filter
    const applyFilterButton = document.querySelector(".bg-blue-600");
    if (applyFilterButton) {
        applyFilterButton.addEventListener("click", function () {
            applyFilters();
        });
    }

    // Search input
    const searchInput = document.querySelector('input[placeholder="Search"]');
    if (searchInput) {
        let searchTimeout;
        searchInput.addEventListener("input", function () {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                applyFilters();
            }, 500); // Debounce 500ms
        });
    }

    // Handle "Berikan Tanggapan" button clicks
    document.addEventListener("click", function (e) {
        if (e.target && e.target.classList.contains("berikan-tanggapan-btn")) {
            const itemId = e.target.getAttribute("data-item-id");
            const itemTitle = e.target.getAttribute("data-item-title");
            const itemDescription = e.target.getAttribute(
                "data-item-description"
            );
            const itemPeriode = e.target.getAttribute("data-item-periode");

            if (itemId) {
                // Fetch detail from API
                fetch(`/api/layanan/detail/${itemId}`)
                    .then((response) => response.json())
                    .then((data) => {
                        showFeedbackForm(data);
                    })
                    .catch((error) => {
                        console.error("Error fetching detail:", error);
                        // Fallback to basic data
                        showFeedbackForm({
                            nama_kegiatan: itemTitle,
                            deskripsi_kegiatan: itemDescription,
                            periode: itemPeriode,
                        });
                    });
            } else {
                // Fallback for old data structure
                showFeedbackForm({
                    nama_kegiatan: itemTitle,
                    deskripsi_kegiatan: itemDescription,
                    periode: itemPeriode,
                });
            }
        }
    });
}

// Function to show the feedback form
function showFeedbackForm(detailData) {
    const contentsContainer = document.querySelector("#layanan-contents");
    if (!contentsContainer) return;

    // Keep tabs visible, just reset their state
    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");
    });

    // Render the feedback form
    contentsContainer.innerHTML = `
        <div class="bg-white rounded overflow-hidden shadow">
            ${renderInformasiRencanaKegiatan(detailData)}
            ${renderSaranPendapatForm()}
        </div>
    `;
}

// Function to render "Informasi Rencana Kegiatan" section
function renderInformasiRencanaKegiatan(data) {
    return `
        <div class="border border-green-600 rounded-lg mb-6">
            <div class="bg-green-50 p-4 border-b border-green-200">
                <h2 class="text-lg font-semibold text-green-800">Informasi Rencana Kegiatan</h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">No. Registrasi</label>
                                <div class="bg-green-100 text-green-800 px-3 py-2 rounded text-sm font-medium">${
                                    data.no_registrasi || "-"
                                }</div>
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Jenis Dokumen</label>
                                <div class="bg-green-100 text-green-800 px-3 py-2 rounded text-sm font-medium">${
                                    data.jenis_dokumen || "-"
                                }</div>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Nama Kegiatan</label>
                            <div class="bg-green-100 text-green-800 px-3 py-2 rounded text-sm font-medium leading-relaxed">
                                ${data.nama_kegiatan || "-"}
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Bidang Usaha/Kegiatan</label>
                                <div class="bg-green-100 text-green-800 px-3 py-2 rounded text-sm font-medium">${
                                    data.bidang_usaha || "-"
                                }</div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Skala/Besaran</label>
                                <div class="bg-green-100 text-green-800 px-3 py-2 rounded text-sm font-medium">${
                                    data.skala_besaran || "-"
                                }</div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Lokasi Kegiatan</label>
                                <div class="bg-green-100 text-green-800 px-3 py-2 rounded text-sm font-medium">${
                                    data.lokasi_kegiatan || "-"
                                }</div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Kewenangan</label>
                                <div class="bg-green-100 text-green-800 px-3 py-2 rounded text-sm font-medium">${
                                    data.kewenangan || "-"
                                }</div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Pemrakarsa</label>
                                <div class="bg-green-100 text-green-800 px-3 py-2 rounded text-sm font-medium">${
                                    data.pemrakarsa || "-"
                                }</div>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Provinsi/Kota</label>
                            <div class="bg-green-100 text-green-800 px-3 py-2 rounded text-sm font-medium">${
                                data.provinsi_kota || "-"
                            }</div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Deskripsi Kegiatan</label>
                            <div class="bg-green-100 text-green-800 px-3 py-2 rounded text-sm font-medium leading-relaxed">
                                ${data.deskripsi_kegiatan || "-"}
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Dampak Potensial</label>
                            <div class="bg-green-100 text-green-800 px-3 py-2 rounded text-sm font-medium leading-relaxed">
                                ${data.dampak_potensial || "-"}
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Lokasi</label>
                        <div class="bg-blue-500 rounded-lg h-64 flex items-center justify-center text-white">
                            <div class="text-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                                <p class="text-sm">Peta Lokasi Kegiatan</p>
                                ${
                                    data.latitude && data.longitude
                                        ? `<p class="text-xs mt-1">${data.latitude}, ${data.longitude}</p>`
                                        : ""
                                }
                            </div>
                        </div>
                        <div class="mt-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Deskripsi Lokasi</label>
                            <div class="bg-green-100 text-green-800 px-3 py-2 rounded text-sm font-medium leading-relaxed">
                                ${data.deskripsi_lokasi || "-"}
                            </div>
                        </div>
                        <div class="mt-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Periode</label>
                            <div class="bg-green-100 text-green-800 px-3 py-2 rounded text-sm font-medium">
                                ${data.periode || "-"}
                            </div>
                        </div>
                        <div class="mt-6">
                            <button onclick="goBackToList()" class="bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded-md text-sm font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
                                Kembali
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
}

// Function to render "Saran, Pendapat dan Tanggapan Kegiatan" form
function renderSaranPendapatForm() {
    return `
        <div class="border border-green-600 rounded-lg">
            <div class="bg-green-50 p-4 border-b border-green-200">
                <h2 class="text-lg font-semibold text-green-800 text-center">Saran, Pendapat, dan Tanggapan untuk Kegiatan</h2>
            </div>
            <div class="p-6">
                <form class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="nama" class="block text-sm font-medium text-gray-700 mb-1">Nama</label>
                            <input type="text" id="nama" name="nama" placeholder="Nama"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-green-500 focus:border-green-500">
                        </div>
                        <div>
                            <label for="peran" class="block text-sm font-medium text-gray-700 mb-1">Peran</label>
                            <select id="peran" name="peran"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-green-500 focus:border-green-500">
                                <option value="">Pilih Peran</option>
                                <option value="masyarakat">Masyarakat</option>
                                <option value="lsm">LSM</option>
                                <option value="akademisi">Akademisi</option>
                                <option value="pemerintah">Pemerintah</option>
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="nik" class="block text-sm font-medium text-gray-700 mb-1">NIK</label>
                            <input type="text" id="nik" name="nik" placeholder="NIK"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-green-500 focus:border-green-500">
                        </div>
                        <div>
                            <label for="telepon" class="block text-sm font-medium text-gray-700 mb-1">No. Telepon/Handphone</label>
                            <div class="flex">
                                <select class="px-3 py-2 border border-gray-300 border-r-0 rounded-l-md bg-gray-50">
                                    <option value="+62">+62</option>
                                </select>
                                <input type="text" id="telepon" name="telepon" placeholder="No. Telepon/Handphone"
                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-r-md focus:outline-none focus:ring-green-500 focus:border-green-500">
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                            <input type="email" id="email" name="email" placeholder="Email"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-green-500 focus:border-green-500">
                        </div>
                        <div>
                            <label for="gender" class="block text-sm font-medium text-gray-700 mb-1">Gender</label>
                            <select id="gender" name="gender"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-green-500 focus:border-green-500">
                                <option value="">Pilih Gender</option>
                                <option value="laki-laki">Laki-laki</option>
                                <option value="perempuan">Perempuan</option>
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="md:col-span-2">
                            <div class="space-y-4">
                                <div>
                                    <label for="kondisi_lingkungan" class="block text-sm font-medium text-gray-700 mb-1">
                                        Kondisi Lingkungan di Dalam dan Sekitar Lokasi Tapak Proyek
                                    </label>
                                    <span class="text-xs text-red-500">Data wajib diisi</span>
                                    <textarea id="kondisi_lingkungan" name="kondisi_lingkungan" rows="3"
                                              placeholder="Kondisi Lingkungan di Dalam dan Sekitar Lokasi Tapak Proyek"
                                              class="w-full px-3 py-2 border border-red-300 rounded-md focus:outline-none focus:ring-green-500 focus:border-green-500"></textarea>
                                </div>

                                <div>
                                    <label for="nilai_lokal" class="block text-sm font-medium text-gray-700 mb-1">
                                        Nilai Lokal yang Berpotensi akan Terkena Dampak
                                    </label>
                                    <span class="text-xs text-red-500">Data wajib diisi</span>
                                    <textarea id="nilai_lokal" name="nilai_lokal" rows="3"
                                              placeholder="Nilai Lokal yang Berpotensi akan Terkena Dampak"
                                              class="w-full px-3 py-2 border border-red-300 rounded-md focus:outline-none focus:ring-green-500 focus:border-green-500"></textarea>
                                </div>

                                <div>
                                    <label for="kekhawatiran" class="block text-sm font-medium text-gray-700 mb-1">Kekhawatiran</label>
                                    <span class="text-xs text-red-500">Data wajib diisi</span>
                                    <textarea id="kekhawatiran" name="kekhawatiran" rows="3"
                                              placeholder="Kekhawatiran"
                                              class="w-full px-3 py-2 border border-red-300 rounded-md focus:outline-none focus:ring-green-500 focus:border-green-500"></textarea>
                                </div>

                                <div>
                                    <label for="harapan" class="block text-sm font-medium text-gray-700 mb-1">Harapan</label>
                                    <span class="text-xs text-red-500">Data wajib diisi</span>
                                    <textarea id="harapan" name="harapan" rows="3"
                                              placeholder="Harapan"
                                              class="w-full px-3 py-2 border border-red-300 rounded-md focus:outline-none focus:ring-green-500 focus:border-green-500"></textarea>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">
                                        Tingkat Kekhawatiran atau Harapan terhadap Kegiatan Ini
                                    </label>
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm text-gray-600">Khawatir</span>
                                        <div class="flex space-x-1">
                                            <button type="button" class="rating-star text-gray-300 hover:text-yellow-400 text-2xl" data-rating="1">★</button>
                                            <button type="button" class="rating-star text-gray-300 hover:text-yellow-400 text-2xl" data-rating="2">★</button>
                                            <button type="button" class="rating-star text-gray-300 hover:text-yellow-400 text-2xl" data-rating="3">★</button>
                                            <button type="button" class="rating-star text-gray-300 hover:text-yellow-400 text-2xl" data-rating="4">★</button>
                                            <button type="button" class="rating-star text-gray-300 hover:text-yellow-400 text-2xl" data-rating="5">★</button>
                                        </div>
                                        <span class="text-sm text-gray-600">Harapan</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Unggah Foto Selfie
                            </label>
                            <span class="text-xs text-gray-500">(Ukuran Maks 1 MB)</span>
                            <div class="mt-2 flex flex-col items-center">
                                <div class="bg-gray-200 rounded-full w-24 h-24 flex items-center justify-center mb-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                                    </svg>
                                </div>
                                <input type="file" id="foto_selfie" name="foto_selfie" accept="image/*"
                                       class="text-xs text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-green-50 file:text-green-700 hover:file:bg-green-100">
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end space-x-4 pt-6">
                        <button type="button" onclick="goBackToList()"
                                class="bg-red-500 text-white px-6 py-2 rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500">
                            Batal
                        </button>
                        <button type="submit"
                                class="bg-green-500 text-white px-6 py-2 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500">
                            Kirim
                        </button>
                    </div>
                </form>
            </div>
        </div>
    `;
}

// Function to go back to the main list
function goBackToList() {
    // Re-render the original content from database
    fetch("/api/layanan/data")
        .then((response) => response.json())
        .then((data) => {
            renderContents(data.contents);
            changeTab("amdal"); // Default to AMDAL tab
        })
        .catch((error) =>
            console.error("Gagal load layanan dari database:", error)
        );
}

// 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");
    }
}

// Handle tab click - check if we need to return to table view first
function handleTabClick(tabName) {
    // Check if we're currently in feedback form view
    const contentsContainer = document.querySelector("#layanan-contents");
    const isFeedbackForm =
        contentsContainer && !contentsContainer.querySelector(".tab-content");

    if (isFeedbackForm) {
        // Return to table view first, then switch to the clicked tab
        fetch("/api/layanan/data")
            .then((response) => response.json())
            .then((data) => {
                renderContents(data.contents);
                changeTab(tabName);
            })
            .catch((error) =>
                console.error("Gagal load layanan dari database:", error)
            );
    } else {
        // Normal tab switching
        changeTab(tabName);
    }
}

// Star rating functionality
document.addEventListener("click", function (e) {
    if (e.target && e.target.classList.contains("rating-star")) {
        const rating = parseInt(e.target.getAttribute("data-rating"));
        const stars = document.querySelectorAll(".rating-star");

        stars.forEach((star, index) => {
            if (index < rating) {
                star.classList.remove("text-gray-300");
                star.classList.add("text-yellow-400");
            } else {
                star.classList.remove("text-yellow-400");
                star.classList.add("text-gray-300");
            }
        });
    }
});

// Map tab ID to document type
function mapTabToDocumentType(tabId) {
    const mapping = {
        amdal: "AMDAL",
        "ukl-upl": "UKL-UPL",
        addendum: "Addendum",
        audit: "AUDIT",
    };
    return mapping[tabId] || "AMDAL";
}

// Apply filters function
function applyFilters() {
    const searchValue =
        document.querySelector('input[placeholder="Search"]')?.value || "";
    const kabkotaValue = document.getElementById("kabkota")?.value || "";
    const kecamatanValue = document.getElementById("kecamatan")?.value || "";
    const kelurahanValue = document.getElementById("kelurahan")?.value || "";

    // Get current active tab
    const activeTab = document.querySelector(".tab-btn.bg-blue-900");
    const activeTabId = activeTab ? activeTab.id.replace("tab-", "") : "amdal";

    const params = new URLSearchParams({
        search: searchValue,
        kabkota: kabkotaValue,
        kecamatan: kecamatanValue,
        kelurahan: kelurahanValue,
        jenis_dokumen: mapTabToDocumentType(activeTabId),
    });

    fetch(`/api/layanan/filter?${params}`)
        .then((response) => response.json())
        .then((data) => {
            renderContents(data);
            changeTab(activeTabId);
        })
        .catch((error) => {
            console.error("Error applying filters:", error);
        });
}

// Load original data function
function loadOriginalData() {
    fetch("/api/layanan/data")
        .then((response) => response.json())
        .then((data) => {
            renderContents(data.contents);
            changeTab("amdal");
        })
        .catch((error) =>
            console.error("Gagal load layanan dari database:", error)
        );
}