Vue.component('ADBRimoFcpMap', {
    data() {
        return {
            mapMarkers: [],
            isLoading: true,
            error: null,
            window,
            fetchUrl: window.TT_CONFIG.BASE_PATH + '/ADBRimoFcp/getAllFCPs',
        };
    },
    async created() {
        await this.fetchAndPrepareData();
    },
    methods: {
        async fetchAndPrepareData() {
            this.isLoading = true;
            this.error = null;
            try {
                const response = await axios.get(this.fetchUrl);
                if (response.data && response.data.success && Array.isArray(response.data.data)) {
                    this.mapMarkers = response.data.data
                        .filter(fcp => fcp.gps_lat != null && fcp.gps_long != null)
                        .map(fcp => ({
                            lat: fcp.gps_lat,
                            lng: fcp.gps_long,
                            options: {
                                asyncPopupContent: async (markerData) => {
                                    const response = await axios.get(`${this.window.TT_CONFIG.BASE_PATH}/ADBRimoFcp/getById?id=${fcp.id}`);
                                    const fullFcpData = response.data;
                                    return `
    <div style="padding: 0px 5px 5px 5px; font-size: 0.85rem;">
        <h5 class="mb-3 mt-1">${fullFcpData.name}</h5>
        <table class="table table-sm table-borderless mb-0">
            <tbody>
                <tr>
                    <td class="font-weight-bold py-1">RIMO ID:</td>
                    <td class="py-1" style="word-break: break-all;">${fullFcpData.rimo_id}</td>
                </tr>
                <tr>
                    <td class="font-weight-bold py-1">RIMO Ex State:</td>
                    <td class="py-1">${fullFcpData.rimo_ex_state}</td>
                </tr>
                <tr>
                    <td class="font-weight-bold py-1">RIMO Op State:</td>
                    <td class="py-1">${fullFcpData.rimo_op_state}</td>
                </tr>
                 <tr>
                    <td class="font-weight-bold py-1">Building Type:</td>
                    <td class="py-1">${fullFcpData.building_type}</td>
                </tr>
                <tr>
                    <td class="font-weight-bold py-1">Coordinates:</td>
                    <td class="py-1">
                        <a href="https://maps.google.com/?q=${fullFcpData.gps_lat},${fullFcpData.gps_long}" target="_blank" class="text-primary">
                            <i class="fas fa-map-marker-alt mr-1"></i>${fullFcpData.gps_lat},<br> ${fullFcpData.gps_long}
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
`;                                },
                            }
                        }));
                } else {
                    console.error("Invalid data format from API:", response.data);
                    this.error = "Invalid data format received.";
                    this.mapMarkers = [];
                }
            } catch (err) {
                console.error("Error fetching FCP data:", err);
                this.error = "Failed to load FCP locations.";
                this.mapMarkers = [];
            } finally {
                this.isLoading = false;
            }
        }
    },
    template: `
      <tt-card style="height: 80vh; position: relative;">
        <template #header>
          <h5>FCP Locations</h5>
        </template>
        <div v-if="!isLoading && error" class="alert alert-danger">
          {{ error }}
        </div>
        <tt-map :markers-data="mapMarkers" :loading="isLoading"></tt-map>
        <div v-if="!isLoading && !error && mapMarkers.length === 0" class="alert alert-info">
          No FCP locations found.
        </div>
      </tt-card>
    `
});