<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-2 mb-2">
                        <img src="dist/img/ODP.png" class="mr-2" width="25px"><span>Topologi</span>
                    </div>
                    <div class="col-md-2 mb-2">
                        <img src="dist/img/ON.png"  class="mr-2" width="25px"><span>Aktif / Connected</span>
                    </div>
                    <div class="col-md-2 mb-2">
                        <img src="dist/img/OF.png"  class="mr-2" width="25px"><span>Aktif / Disconnected</span>
                    </div>
                    <div class="col-md-2 mb-2">
                        <img src="dist/img/ON1.png" class="mr-2" width="25px"><span>Tidak Aktif / Connected</span>
                    </div>
                    <div class="col-md-2 mb-2">
                        <img src="dist/img/OF1.png" class="mr-2" width="25px"><span>Tidak Aktif / Disconnected</span>
                    </div>
                </div>
                <div id="map" style="height: 90vh; width: 100%;"></div>
            </div>
        </div>
    </div>
</section>

<script>
    let map; // Variabel untuk menyimpan peta
    const markers = []; // Array untuk menyimpan marker

    function initMap() {
        // Inisialisasi peta dengan tipe hybrid
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: -7.062083, lng: 106.797390 }, // Pusat peta
            zoom: 11,
            mapTypeId: 'hybrid' // Menentukan tipe peta menjadi hybrid
        });

        // Fetch data dari PHP saat pertama kali
        fetchMarkers();
        
        // Mengatur interval untuk memperbarui marker setiap 10 detik
        setInterval(fetchMarkers, 30000);
    }

    function fetchMarkers() {
        fetch('load/maps_marker.php?i=<?php echo base64_encode($SqlDataWHIdM); ?>')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
            })
            .then(markersData => {
                // Hapus marker yang ada sebelumnya
                markers.forEach(marker => marker.setMap(null));
                markers.length = 0; // Kosongkan array marker

                // Tambahkan marker baru ke peta
                markersData.forEach(markerData => {
                    const markerInstance = new google.maps.Marker({
                        position: { lat: markerData.lat, lng: markerData.lng },
                        map: map,
                        title: markerData.title,
                        icon: {
                            url: markerData.icon, // Menggunakan ikon dari data
                            scaledSize: new google.maps.Size(30, 30) // Mengatur ukuran ikon
                        }
                    });

                    // Simpan marker ke array
                    markers.push(markerInstance);

                    // Event listener untuk klik marker
                    markerInstance.addListener('click', () => {
                        const infoWindow = new google.maps.InfoWindow();
                        infoWindow.setContent(markerData.content); // Set konten InfoWindow
                        infoWindow.open(map, markerInstance); // Tampilkan InfoWindow
                    });
                });
            })
            .catch(error => console.error('Error fetching markers:', error));
    }

    // Inisialisasi peta saat halaman selesai dimuat
    window.onload = initMap;
</script>
