document.addEventListener("DOMContentLoaded", function () {

    let allData = [];
    let filteredData = [];
    let currentKategori = "peraturan";
    let currentPage = 1;
    const perPage = 10;

    function formatTanggal(dateStr) {
        return new Date(dateStr).toLocaleDateString("id-ID", {
            day: "numeric",
            month: "long",
            year: "numeric"
        });
    }

    function loadRegulasi() {
        fetch('/WebNew/Regulasi/GetRegulasi')
            .then(res => res.json())
            .then(data => {
                allData = data;
                filterData();
            });
    }

    function filterData() {
        const keyword = document.getElementById("search").value.toLowerCase();
        const tahun = document.getElementById("tahun").value;

        filteredData = allData.filter(item => {
            const kategori = (item.kategori || "").trim().toLowerCase();
            const judul = (item.judul || "").toLowerCase();

            return (
                kategori === currentKategori &&
                judul.includes(keyword) &&
                (tahun === "" || item.tahun == tahun)
            );
        });

        currentPage = 1;
        renderPagination();
    }

    function renderPagination() {
        const start = (currentPage - 1) * perPage;
        const end = start + perPage;

        const paginatedData = filteredData.slice(start, end);

        renderData(paginatedData);
        renderPaginationControls();
        renderPaginationInfo(start, end);
    }

    function renderData(data) {

        let html = "";

        if (data.length === 0) {
            html = `
            <p class="text-muted text-center">
                Data tidak ditemukan
            </p>
        `;
        }

        data.forEach((item, index) => {

            let lampiranHtml = "";

            if (item.lampiran && item.lampiran.length > 0) {

                item.lampiran.forEach(l => {

                    lampiranHtml += `
                    <div class="lampiran-item">

                        <span>
                            <i class="bi bi-paperclip"></i>
                            ${l.judul}
                        </span>

                        <div>
                            <a href="${l.file}"
                               target="_blank"
                               class="btn btn-light btn-sm me-2">

                                Lihat

                            </a>

                            <a href="${l.file}"
                               download
                               class="btn btn-primary btn-sm">

                                Unduh

                            </a>
                        </div>

                    </div>
                `;
                });
            }

            html += `

            <div class="card regulasi-card mb-3">

                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">

                    <div class="d-flex align-items-center regulasi-toggle"
                         ${item.lampiran?.length > 0
                    ? `data-bs-toggle="collapse"
                               data-bs-target="#lampiran-${index}"`
                    : ""}>

                        <div class="me-3">
                            <i class="bi bi-file-earmark-pdf fs-2 text-primary file-icon"></i>
                        </div>

                        <div>

                            <h6 class="mb-1">
                                ${item.judul}
                            </h6>

                            <small class="text-muted">
                                ${formatTanggal(item.tanggal)}
                                |
                                Diunduh ${item.download} kali
                            </small>

                        </div>

                    </div>

                    <div class="d-flex align-items-center gap-2">

                        <a href="${item.file}"
                           target="_blank"
                           class="btn btn-light btn-sm">

                            Lihat

                        </a>

                        <a href="${item.file}"
                           download
                           class="btn btn-primary btn-sm">

                            Unduh

                        </a>


                        ${item.lampiran?.length > 0
                    ? `
                                <button
                                    class="btn btn-outline-primary btn-sm btn-lampiran collapsed"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#lampiran-${index}">

                                    <i class="bi bi-chevron-down"></i>

                                </button>
                            `
                    : ""
                }

                    </div>

                </div>

                ${item.lampiran?.length > 0
                    ? `
                    <div class="collapse mt-3"
                         id="lampiran-${index}">

                        ${lampiranHtml}

                    </div>
                    `
                    : ""
                }

            </div>
        `;
        });

        document.getElementById("list-regulasi").innerHTML = html;
    }

    function renderPaginationControls() {

        const totalPages = Math.ceil(filteredData.length / perPage);

        let html = "";

        if (totalPages === 0) {
            document.getElementById("pagination").innerHTML = "";
            return;
        }

        html += `
            <button class="btn btn-sm btn-outline-primary me-1"
                ${currentPage === 1 ? "disabled" : ""}
                onclick="changePage(${currentPage - 1})">
                <i class="bi bi-chevron-left"></i>
            </button>
        `;

        for (let i = 1; i <= totalPages; i++) {
            html += `
                <button
                    class="btn btn-sm ${i === currentPage ? "btn-primary" : "btn-outline-primary"} mx-1"
                    onclick="changePage(${i})">
                    ${i}
                </button>
            `;
        }

        html += `
            <button class="btn btn-sm btn-outline-primary ms-1"
                ${currentPage === totalPages ? "disabled" : ""}
                onclick="changePage(${currentPage + 1})">
                <i class="bi bi-chevron-right"></i>
            </button>
        `;

        document.getElementById("pagination").innerHTML = html;
    }

    function renderPaginationInfo(start, end) {
        const total = filteredData.length;

        if (total === 0) {
            document.getElementById("pagination-info").innerHTML = "";
            return;
        }

        const from = start + 1;
        const to = Math.min(end, total);

        document.getElementById("pagination-info").innerHTML =
            `Show ${from}–${to} of ${total} data`;
    }

    window.changePage = function (page) {
        currentPage = page;
        renderPagination();
        window.scrollTo({ top: 300, behavior: "smooth" });
    };

    document.querySelectorAll(".filter-btn").forEach(btn => {
        btn.addEventListener("click", function () {
            document.querySelectorAll(".filter-btn").forEach(b => b.classList.remove("active"));
            this.classList.add("active");
            currentKategori = this.dataset.kategori;
            filterData();
        });
    });

    document.getElementById("search").addEventListener("keyup", filterData);
    document.getElementById("tahun").addEventListener("change", filterData);

    loadRegulasi();

});