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";
import GeneralTable from "../../table-generator.js";

const dataTourismsColumns = [
    "ID Proyek",
    "Jenis Proyek",
    "NIB",
    "Nama Perusahaan",
    "Tanggal Terbit OSS",
    "Uraian Status Penanaman Modal",
    "Uraian Jenis Perusahaan",
    "Risiko Proyek",
    "Nama Proyek",
    "Uraian Skala Usaha",
    "Alamat Usaha",
    "Kecamatan",
    "Desa",
    "Longitude",
    "Latitude",
    "Tanggal Pengajuan Project",
    "KBLI",
    "Judul KBLI",
    "Sektor Pembina",
    "Nama User",
    "Email",
    "Kontak",
    "Luas Tanah (m2)",
    "Jumlah Investasi",
    "TKI",
    {
        name: "Actions",
        widht: "120px",
        formatter: function (cell, row) {
            const id = row.cells[25].data;
            const long = row.cells[13].data;
            const lat = row.cells[14].data;
            const model = "data/tourisms";
            return gridjs.html(`
                <div class="d-flex justify-items-end gap-10">
                    <button class="btn btn-warning me-2 btn-edit" 
                        data-id="${id}" 
                        data-model="${model}">
                        <i class='bx bx-edit'></i></button>
                    
                    <button class="btn btn-info me-2 btn-view" 
                        data-long="${long}" data-lat="${lat}">
                        <i class='bx bx-show'></i></button>
            
                    <button class="btn btn-red btn-delete" 
                        data-id="${id}">
                        <i class='bx bxs-trash'></i></button>
                </div>
            `);
        },
    },
];

document.addEventListener("DOMContentLoaded", () => {
    const table = new GeneralTable(
        "tourisms-data-table",
        `${GlobalConfig.apiHost}/api/tourisms`,
        `${GlobalConfig.apiHost}`,
        dataTourismsColumns
    );

    table.processData = function (data) {
        return data.data.map((item) => {
            return [
                item.project_id,
                item.project_type_id,
                item.nib,
                item.business_name,
                item.oss_publication_date,
                item.investment_status_description,
                item.business_form,
                item.project_risk,
                item.project_name,
                item.business_scale,
                item.business_address,
                item.district_name,
                item.village_name,
                item.longitude,
                item.latitude,
                item.project_submission_date,
                item.kbli,
                item.kbli_title,
                item.supervisory_sector,
                item.user_name,
                item.email,
                item.contact,
                item.land_area_in_m2,
                item.investment_amount,
                item.tki,
                item.id,
            ];
        });
    };

    table.init();

    // Event listener untuk tombol "View" yang memunculkan modal
    document.addEventListener("click", function (e) {
        if (e.target && e.target.classList.contains("btn-view")) {
            const long = e.target.getAttribute("data-long");
            const lat = e.target.getAttribute("data-lat");

            // Menyiapkan URL iframe dengan koordinat yang didapatkan
            const iframeSrc = `https://www.google.com/maps?q=${lat},${long}&hl=es;z=14&output=embed`;

            // Menemukan modal dan iframe di dalam modal
            const modal = document.querySelector(".modalGMaps");
            const iframe = modal.querySelector("iframe");

            // Set src iframe untuk menampilkan peta dengan koordinat yang relevan
            iframe.src = iframeSrc;

            // Menampilkan modal
            var modalInstance = new bootstrap.Modal(modal);
            modalInstance.show();
        }
    });
});