@{
    Layout = "_Layout";

    ViewData["Title"] = "Keanekaragaman Hayati - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Informasi lengkap mengenai keanekaragaman hayati di DKI Jakarta. Temukan data flora dan fauna, program konservasi, serta upaya pelestarian ekosistem urban yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
    ViewData["Keywords"] = "Keanekaragaman Hayati, Flora Fauna Jakarta, Konservasi, Ekosistem Urban, Biodiversitas, Jakarta";
    ViewData["OgTitle"] = "Keanekaragaman Hayati - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Informasi lengkap mengenai keanekaragaman hayati di DKI Jakarta. Temukan data flora dan fauna, program konservasi, serta upaya pelestarian ekosistem urban yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
    ViewData["TwitterTitle"] = "Keanekaragaman Hayati - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Informasi lengkap mengenai keanekaragaman hayati di DKI Jakarta. Temukan data flora dan fauna, program konservasi, serta upaya pelestarian ekosistem urban yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Keanekaragaman Hayati";
    ViewData["TitleBeforeHighlight"] = "Keanekaragaman";
    ViewData["TitleHighlight"] = "Hayati";
}

<!-- Breadcumb -->
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />

<div class="flex justify-center">
    <div class="w-full max-w-7xl py-12 px-4">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold mb-4">Keanekaragaman Hayati</h1>
            <p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
                Jelajahi keanekaragaman hayati di berbagai taman dan ruang terbuka hijau di DKI Jakarta. Klik pada marker di peta untuk melihat flora dan fauna yang dapat ditemukan di lokasi tersebut.
            </p>
        </div>

        <!-- Map Container -->
        <div class="flex flex-col lg:flex-row gap-6 h-screen lg:h-[600px]">
            <!-- Map -->
            <div class="flex-1 order-2 lg:order-1">
                <div id="map" class="w-full h-64 lg:h-full rounded-lg shadow-lg"></div>
            </div>

            <!-- Sidebar -->
            <div class="w-full lg:w-96 order-1 lg:order-2">
                <div class="bg-white rounded-lg shadow-lg h-full overflow-hidden">
                    <div id="sidebar-content" class="h-full flex flex-col">
                        <!-- Default Content -->
                        <div id="default-content" class="p-6 flex flex-col items-center justify-center h-full text-center">
                            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
                                <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">Pilih Lokasi</h3>
                            <p class="text-gray-600 text-sm">Klik pada marker di peta untuk melihat informasi keanekaragaman hayati di lokasi tersebut.</p>
                        </div>

                        <!-- Location Content (Hidden by default) -->
                        <div id="location-content" class="hidden h-full flex flex-col">
                            <div class="p-4 bg-green-50 border-b">
                                <h2 id="location-title" class="text-xl font-bold text-green-800"></h2>
                                <p id="location-description" class="text-sm text-green-600 mt-1"></p>
                            </div>
                            <div class="flex-1 overflow-y-auto p-6">
                                <div id="flora-fauna-content">
                                    <!-- Content will be loaded here -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Mapbox CSS -->
<link href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet"/>

<!-- Mapbox JS -->
<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>

<script>
    // Mapbox access token from appsettings.json
    mapboxgl.accessToken = '@ViewBag.MapboxToken';

    // Initialize map
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [106.8451, -6.2088], // Jakarta center
        zoom: 11
    });

    // GeoJSON data for locations
    const geojson = {
        type: 'FeatureCollection',
        features: [
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [106.8570, -6.2297]
                },
                properties: {
                    id: 'taman-tebet',
                    title: 'Taman Tebet',
                    description: 'Ruang terbuka hijau di kawasan Tebet'
                }
            },
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [106.8296, -6.1944]
                },
                properties: {
                    id: 'taman-suropati',
                    title: 'Taman Suropati',
                    description: 'Taman bersejarah di pusat kota Jakarta'
                }
            },
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [106.8317, -6.1927]
                },
                properties: {
                    id: 'taman-menteng',
                    title: 'Taman Menteng',
                    description: 'Taman rekreasi keluarga di kawasan Menteng'
                }
            }
        ]
    };

    // Location data with complete flora and fauna
    const locations = {
        'taman-tebet': {
            name: 'Taman Tebet',
            description: 'Ruang terbuka hijau di kawasan Tebet',
            coordinates: [106.8570, -6.2297],
            flora: [
                {
                    category: '🌳 Pohon',
                    species: [
                        {
                            name: 'Trembesi (Samanea saman)',
                            description: 'Pohon besar yang sering ditemukan di ruang terbuka hijau dengan canopy yang luas, memberikan teduh bagi pengunjung.'
                        },
                        {
                            name: 'Ketapang (Terminalia cattapa)',
                            description: 'Banyak ditemukan di pinggir jalan atau taman, daun lebar dan pohon yang relatif mudah ditemukan di daerah tropis.'
                        },
                        {
                            name: 'Angsana (Pterocarpus indicus)',
                            description: 'Pohon dengan daun yang lebat, sering menjadi peneduh yang baik di taman-taman kota.'
                        }
                    ]
                },
                {
                    category: '🌺 Tanaman Hias dan Semak',
                    species: [
                        {
                            name: 'Bunga Sepatu (Hibiscus rosa-sinensis)',
                            description: 'Tanaman berbunga yang sering ditanam di sekitar taman dan memberikan warna cerah.'
                        },
                        {
                            name: 'Bougenville (Bougainvillea spp.)',
                            description: 'Tanaman hias dengan bunga cerah yang dapat ditemukan menghiasi pagar atau area terbuka.'
                        },
                        {
                            name: 'Pucuk Merah (Syzygium oleana)',
                            description: 'Tanaman semak yang sering ditanam di taman untuk memberikan nuansa hijau dan menghiasi pagar taman.'
                        }
                    ]
                }
            ],
            fauna: [
                {
                    category: '🦅 Burung',
                    species: [
                        {
                            name: 'Kutilang (Pycnonotus goiavier)',
                            description: 'Burung kecil yang sering terlihat di pohon-pohon dan semak-semak taman, dengan suara khasnya yang merdu.'
                        },
                        {
                            name: 'Jalak (Gracupica jalla)',
                            description: 'Burung berwarna cerah yang bisa ditemukan di taman ini, suka berkelompok dan sering terbang tinggi.'
                        }
                    ]
                },
                {
                    category: '🐿️ Mamalia',
                    species: [
                        {
                            name: 'Bajing (Callosciurus spp.)',
                            description: 'Mamalia kecil yang sering terlihat memanjat pohon atau berlari di tanah taman. Mereka sangat aktif dan mudah terlihat pada siang hari.'
                        }
                    ]
                },
                {
                    category: '🦋 Serangga',
                    species: [
                        {
                            name: 'Kupu-kupu (Papilio spp.)',
                            description: 'Ditemukan di berbagai bunga di taman, terutama yang memiliki warna cerah.'
                        },
                        {
                            name: 'Lebah (Apis mellifera)',
                            description: 'Aktif di sekitar tanaman berbunga, berperan dalam penyerbukan tanaman.'
                        }
                    ]
                }
            ]
        },
        'taman-suropati': {
            name: 'Taman Suropati',
            description: 'Taman bersejarah di pusat kota Jakarta',
            coordinates: [106.8296, -6.1944],
            flora: [
                {
                    category: '🌳 Pohon',
                    species: [
                        {
                            name: 'Mahoni (Swietenia mahagoni)',
                            description: 'Pohon peneduh yang banyak ditemukan di taman kota, memiliki daun majemuk dan batang yang kokoh.'
                        },
                        {
                            name: 'Flamboyan (Delonix regia)',
                            description: 'Pohon dengan bunga merah cerah yang bermekaran di musim kemarau, memberikan pemandangan yang indah.'
                        }
                    ]
                }
            ],
            fauna: [
                {
                    category: '🦅 Burung',
                    species: [
                        {
                            name: 'Merpati (Columba livia)',
                            description: 'Burung yang sangat umum ditemukan di taman kota, sering terlihat mencari makan di tanah.'
                        },
                        {
                            name: 'Tekukur (Streptopelia chinensis)',
                            description: 'Burung bersuara khas yang sering terdengar di pagi hari, biasa hinggap di pohon-pohon taman.'
                        }
                    ]
                }
            ]
        },
        'taman-menteng': {
            name: 'Taman Menteng',
            description: 'Taman rekreasi keluarga di kawasan Menteng',
            coordinates: [106.8317, -6.1927],
            flora: [
                {
                    category: '🌳 Pohon',
                    species: [
                        {
                            name: 'Beringin (Ficus benjamina)',
                            description: 'Pohon besar dengan akar gantung yang karakteristik, memberikan teduh yang sangat baik.'
                        },
                        {
                            name: 'Tanjung (Mimusops elengi)',
                            description: 'Pohon dengan bunga putih harum yang bermekaran sepanjang tahun, daun hijau mengkilap.'
                        }
                    ]
                }
            ],
            fauna: [
                {
                    category: '🦅 Burung',
                    species: [
                        {
                            name: 'Gereja Taruk (Passer montanus)',
                            description: 'Burung kecil yang hidup berkelompok, sering terlihat di area dengan banyak pengunjung.'
                        }
                    ]
                },
                {
                    category: '🐱 Mamalia',
                    species: [
                        {
                            name: 'Kucing Liar (Felis catus)',
                            description: 'Kucing yang hidup bebas di taman, biasanya jinak dan sering diberi makan pengunjung.'
                        }
                    ]
                }
            ]
        }
    };

    // Add markers from geojson (menggunakan for..of agar sesuai dokumentasi)
    for (const feature of geojson.features) {
        // Membuat elemen custom marker
        const el = document.createElement('div');
        el.className = 'marker';
        // Anda bisa menambahkan innerHTML/icon custom di sini jika ingin

        // Membuat marker dengan elemen custom
        new mapboxgl.Marker(el)
            .setLngLat(feature.geometry.coordinates)
            .addTo(map);

        // Tambahkan event klik pada marker
        el.addEventListener('click', function() {
            showLocationInfo(feature.properties.id);
        });
    }

    function showLocationInfo(locationId) {
        const location = locations[locationId];
        
        // Hide default content and show location content
        document.getElementById('default-content').classList.add('hidden');
        document.getElementById('location-content').classList.remove('hidden');
        
        // Update location info
        document.getElementById('location-title').textContent = location.name;
        document.getElementById('location-description').textContent = location.description;
        
        // Generate flora and fauna content
        let content = '';
        
        // Flora section
        if (location.flora && location.flora.length > 0) {
            content += '<div class="mb-6"><h3 class="text-lg font-semibold text-green-800 mb-4 flex items-center"><span class="mr-2">🌿</span>Flora</h3>';
            
            location.flora.forEach(category => {
                content += `<div class="mb-4">
                    <h4 class="font-medium text-green-700 mb-2">${category.category}</h4>
                    <div class="space-y-3">`;
                
                category.species.forEach(species => {
                    content += `<div class="bg-green-50 p-3 rounded-lg">
                        <h5 class="font-medium text-gray-800 mb-1">${species.name}</h5>
                        <p class="text-sm text-gray-600">${species.description}</p>
                    </div>`;
                });
                
                content += '</div></div>';
            });
            
            content += '</div>';
        }
        
        // Fauna section
        if (location.fauna && location.fauna.length > 0) {
            content += '<div class="mb-6"><h3 class="text-lg font-semibold text-orange-800 mb-4 flex items-center"><span class="mr-2">🦋</span>Fauna</h3>';
            
            location.fauna.forEach(category => {
                content += `<div class="mb-4">
                    <h4 class="font-medium text-orange-700 mb-2">${category.category}</h4>
                    <div class="space-y-3">`;
                
                category.species.forEach(species => {
                    content += `<div class="bg-orange-50 p-3 rounded-lg">
                        <h5 class="font-medium text-gray-800 mb-1">${species.name}</h5>
                        <p class="text-sm text-gray-600">${species.description}</p>
                    </div>`;
                });
                
                content += '</div></div>';
            });
            
            content += '</div>';
        }
        
        document.getElementById('flora-fauna-content').innerHTML = content;
        
        // Fly to location
        map.flyTo({
            center: location.coordinates,
            zoom: 15,
            duration: 1000
        });
    }

    // Add navigation controls
    map.addControl(new mapboxgl.NavigationControl());

    // Add geolocate control
    map.addControl(
        new mapboxgl.GeolocateControl({
            positionOptions: {
                enableHighAccuracy: true
            },
            trackUserLocation: true,
            showUserHeading: true
        })
    );
</script>

<style>
    .marker {
  background-image: url('https://docs.mapbox.com/help/demos/custom-markers-gl-js/mapbox-icon.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}
</style>