import { Grid } from "gridjs/dist/gridjs.umd.js";
import gridjs from "gridjs/dist/gridjs.umd.js";
import "gridjs/dist/gridjs.umd.js";
import GlobalConfig from "../global-config.js";

class BusinessIndustries {
    constructor() {
        this.table = null; // Store Grid.js instance
    }
    init() {
        this.getFetchApiData();
    }

    getFetchApiData() {
        let tableContainer = document.getElementById(
            "table-business-industries"
        );

        if (this.table) {
            // If table exists, update its data instead of recreating
            this.table
                .updateConfig({
                    server: {
                        url: `${GlobalConfig.apiHost}/api/api-business-industries`,
                        credentials: "include",
                        headers: {
                            Authorization: `Bearer ${document
                                .querySelector('meta[name="api-token"]')
                                .getAttribute("content")}`,
                            "Content-Type": "application/json",
                        },
                        then: (data) =>
                            data.data.map((item) => [
                                item.id,
                                item.nama_kecamatan,
                                item.nama_kelurahan,
                                item.nop,
                                item.nama_wajib_pajak,
                                item.alamat_wajib_pajak,
                                item.alamat_objek_pajak,
                                item.luas_bumi,
                                item.luas_bangunan,
                                item.njop_bumi,
                                item.njop_bangunan,
                                item.ketetapan,
                                item.tahun_pajak,
                                item.created_at,
                                item.id,
                            ]),
                        total: (data) => data.total,
                    },
                })
                .forceRender();
            return;
        }

        this.table = new Grid({
            columns: [
                { name: "ID", width: "80px", hidden: false },
                { name: "Nama Kecamatan", width: "200px" },
                { name: "Nama Kelurahan", width: "200px" },
                { name: "NOP", width: "150px" },
                { name: "Nama Wajib Pajak", width: "250px" },
                { name: "Alamat Wajib Pajak", width: "300px" },
                { name: "Alamat Objek Pajak", width: "300px" },
                { name: "Luas Bumi", width: "150px" },
                { name: "Luas Bangunan", width: "150px" },
                { name: "NJOP Bumi", width: "150px" },
                { name: "NJOP Bangunan", width: "150px" },
                { name: "Ketetapan", width: "150px" },
                { name: "Tahun Pajak", width: "120px" },
                { name: "Created", width: "180px" },
                {
                    name: "Actions",
                    width: "120px",
                    formatter: function (cell) {
                        return gridjs.html(`
                    <div class="d-flex justify-content-center gap-2">
                        <a href="/data/business-industries/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
                            <i class='bx bx-edit'></i>
                        </a>
                        <button class="btn btn-sm btn-red d-inline-flex align-items-center justify-content-center btn-delete-business-industries" data-id="${cell}">
                            <i class='bx bxs-trash'></i>
                        </button>
                    </div>
                `);
                    },
                },
            ],
            search: {
                server: {
                    url: (prev, keyword) => `${prev}?search=${keyword}`,
                },
            },
            pagination: {
                limit: 15,
                server: {
                    url: (prev, page) =>
                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
                            page + 1
                        }`,
                },
            },
            sort: true,
            server: {
                url: `${GlobalConfig.apiHost}/api/api-business-industries`,
                headers: {
                    Authorization: `Bearer ${document
                        .querySelector('meta[name="api-token"]')
                        .getAttribute("content")}`,
                    "Content-Type": "application/json",
                },
                then: (data) =>
                    data.data.map((item) => [
                        item.id,
                        item.nama_kecamatan,
                        item.nama_kelurahan,
                        item.nop,
                        item.nama_wajib_pajak,
                        item.alamat_wajib_pajak,
                        item.alamat_objek_pajak,
                        item.luas_bumi,
                        item.luas_bangunan,
                        item.njop_bumi,
                        item.njop_bangunan,
                        item.ketetapan,
                        item.tahun_pajak,
                        item.created_at,
                        item.id, // ID for Actions column
                    ]),
                total: (data) => data.total,
            },
        }).render(tableContainer);

        document.addEventListener("click", this.handleDelete.bind(this));
    }
    handleDelete(event) {
        if (event.target.classList.contains("btn-delete-business-industries")) {
            event.preventDefault();
            const id = event.target.getAttribute("data-id");
            let modalElement = document.getElementById("modalConfirmation");
            let toastMessage = document.getElementById("toast-message");

            if (!modalElement) {
                console.error("Modal element not found!");
                return;
            }

            let modal = new bootstrap.Modal(modalElement);
            let btnSaveConfirmation = document.getElementById(
                "btnSaveConfirmation"
            );
            let toastElement = document.getElementById("toastNotification");
            let toast = new bootstrap.Toast(toastElement);

            // Remove previous event listeners to avoid multiple bindings
            btnSaveConfirmation.replaceWith(
                btnSaveConfirmation.cloneNode(true)
            );
            btnSaveConfirmation = document.getElementById(
                "btnSaveConfirmation"
            );

            // Set the role ID on the confirm button inside the modal
            btnSaveConfirmation.setAttribute("data-business-industries-id", id);

            // Show the modal
            modal.show();

            btnSaveConfirmation.addEventListener("click", async () => {
                let deletedId = btnSaveConfirmation.getAttribute(
                    "data-business-industries-id"
                );

                try {
                    let response = await fetch(
                        `${GlobalConfig.apiHost}/api/api-business-industries/${deletedId}`,
                        {
                            method: "DELETE",
                            credentials: "include",
                            headers: {
                                "X-CSRF-TOKEN": document
                                    .querySelector('meta[name="csrf-token"]')
                                    .getAttribute("content"),
                                Authorization: `Bearer ${document
                                    .querySelector('meta[name="api-token"]')
                                    .getAttribute("content")}`,
                                "Content-Type": "application/json",
                            },
                        }
                    );

                    if (response.ok) {
                        let result = await response.json();
                        toastMessage.innerText =
                            result.message || "Deleted successfully!";
                        toast.show();

                        // Hide modal
                        modal.hide();

                        // Refresh Grid.js table
                        this.refreshDataSettings();
                    } else {
                        let error = await response.json();
                        console.error("Delete failed:", error);
                        toastMessage.innerText =
                            error.message || "Delete failed!";
                        toast.show();
                    }
                } catch (error) {
                    console.error("Error deleting item:", error);
                    toastMessage.innerText = "An error occurred!";
                    toast.show();
                }
            });
        }
    }

    refreshDataSettings() {
        if (this.table) {
            this.table
                .updateConfig({
                    server: {
                        url: `${GlobalConfig.apiHost}/api/api-business-industries`,
                        credentials: "include",
                        headers: {
                            Authorization: `Bearer ${document
                                .querySelector('meta[name="api-token"]')
                                .getAttribute("content")}`,
                            "Content-Type": "application/json",
                        },
                        then: (data) =>
                            data.data.map((item) => [
                                item.id,
                                item.nama_kecamatan,
                                item.nama_kelurahan,
                                item.nop,
                                item.nama_wajib_pajak,
                                item.alamat_wajib_pajak,
                                item.alamat_objek_pajak,
                                item.luas_bumi,
                                item.luas_bangunan,
                                item.njop_bumi,
                                item.njop_bangunan,
                                item.ketetapan,
                                item.tahun_pajak,
                                item.created_at,
                                item.id, // ID for Actions column
                            ]),
                        total: (data) => data.total,
                    },
                })
                .forceRender();
        }
    }
}
document.addEventListener("DOMContentLoaded", function (e) {
    new BusinessIndustries().init();
});