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 = [
    "Nama Perusahaan",
    "Nama Proyek",
    "Alamat Usaha",
    "Kecamatan",
    "Desa",
    "Luas Tanah (m2)",
    "Jumlah Investasi",
    "TKI",
    "Longitude",
    "Latitude",
    {
        name: "Actions",
        widht: "120px",
        formatter: function (cell, row) {
            const id = row.cells[10].data;
            const long = row.cells[8].data;
            const lat = row.cells[9].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-map'></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.business_name,
                item.project_name,
                item.business_address,
                item.district_name,
                item.village_name,
                item.land_area_in_m2,
                item.investment_amount,
                item.tki,
                item.longitude,
                item.latitude,
                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();
        }
    });
});