@extends('layouts.vertical', ['subtitle' => 'Google Maps'])
@section('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
@endsection

@section('content')
@include('layouts.partials/page-title', ['title' => 'Maps', 'subtitle' => 'Google Maps'])
<div id="map" style="width: 100%; height: 78vh;"></div>
<img src="" />
@endsection

@section('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/togeojson@0.16.0"></script>
<script src="https://unpkg.com/leaflet-omnivore@0.3.4/leaflet-omnivore.min.js"></script>
<script src="https://unpkg.com/leaflet-kml/L.KML.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var map = L.map('map').setView([-6.9175, 107.6191], 10); // Jakarta

        // Tambahkan peta dasar dari OpenStreetMap
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        // Muat file KMZ
        omnivore.kml("{{ asset('storage/maps/rencanapolaruang_rtrw_2024_2044__rencana_pola_ruang.kml') }}")
            .on('ready', function () {
                try {
                    var bounds = this.getBounds();
                    if (bounds.isValid()) {
                        map.fitBounds(bounds);
                    } else {
                        console.warn("Bounds tidak valid, gunakan fallback.");
                        map.setView([-6.9175, 107.6191], 10); // Default ke Jakarta
                    }
                } catch (error) {
                    console.error("Error setting bounds:", error);
                    map.setView([-6.1751, 106.8650], 10);
                }
            })
            .addTo(map);

    });
</script>
@endsection