@extends('layouts.frontend.master')
@section('content')
<div class="leaflet-container">
    <!-- Top Navigation Bar -->
    <div class="leaflet-navbar">
        <div class="leaflet-brand">
            <img src="{{ asset('assets/templates/frontend/images/logo-map.png') }}" alt="Leaflet Maps" class="brand-logo">
            <span class="brand-text">Maps</span>
        </div>
        <div class="leaflet-search-container">
            <div class="search-box">
                <input type="text" id="leaflet-search-input" placeholder="Cari lokasi atau alamat..." autocomplete="off">
            </div>
            <!-- Suggestion Autocomplete -->
            <ul id="leaflet-autocomplete-suggestions" class="autocomplete-suggestions"></ul>
            <div class="search-results" id="leaflet-search-results"></div>
        </div>
        <div class="search-buttons">
            <button class="search-btn" id="leaflet-search-btn" >
                <i class="fas fa-search"></i>
            </button>
        </div>
        <div class="leaflet-user-controls">
            <a href="{{ $exitUrl ?? route('home') }}" class="btn-control btn-control-exit" id="btn-exit-map" title="Keluar dari Peta">
                <i class="fas fa-times"></i>
                <span>Keluar</span>
            </a>
            <button class="btn-control" id="btn-menu" title="Menu">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </div>
    <aside class="leaflet-explorer-panel" id="leaflet-explorer-panel">
        <div class="leaflet-explorer-header">
            <div>
                <span class="leaflet-explorer-kicker">TomohonHebat Maps</span>
                <h2>Jelajahi kota dengan satu sumber peta</h2>
            </div>
            <button type="button" class="leaflet-explorer-close" id="leaflet-explorer-close" aria-label="Tutup panel">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="leaflet-explorer-toolbar">
            <div class="leaflet-explorer-stats" id="leaflet-explorer-stats">
                <span><strong>0</strong> lokasi aktif</span>
                <span><strong>0</strong> kategori</span>
            </div>
            <button type="button" class="leaflet-explorer-refresh" id="leaflet-explorer-refresh">
                <i class="fas fa-rotate-right"></i>
                <span>Refresh</span>
            </button>
        </div>
        <div class="leaflet-explorer-chips" id="leaflet-explorer-chips"></div>
        <div class="leaflet-explorer-empty" id="leaflet-explorer-empty">Memuat tempat dan titik penting kota...</div>
        <div class="leaflet-explorer-list" id="leaflet-explorer-list"></div>
        <div class="leaflet-explorer-detail" id="leaflet-explorer-detail">
            <div class="explorer-detail-placeholder">
                Pilih salah satu lokasi untuk melihat ringkasan cepat, koordinat, dan akses rute.
            </div>
        </div>
    </aside>
    <!-- Map Container -->
    <div class="leaflet-map-container" id="leaflet-map"></div>
    <!-- Kontainer Tab Dipisah -->
    <div class="tab-pane-container" id="tab-layers">
      <!-- Tab: Layers -->
        <div class="layer-section" data-section="base-map">
            <h5>Peta Dasar</h5>
            <div class="layer-options">
                <div class="layer-option active" data-layer="street">
                    <img src="{{ asset('assets/leaflet/preview/street.png') }}" alt="Street">
                    <span>Default</span>
                </div>
                <div class="layer-option" data-layer="satellite">
                    <img src="{{ asset('assets/leaflet/preview/satellite.png') }}" alt="Satellite">
                    <span>Satellite</span>
                </div>
                <div class="layer-option" data-layer="hybrid">
                    <img src="{{ asset('assets/leaflet/preview/hybrid.png') }}" alt="Hybrid">
                    <span>Hybrid</span>
                </div>
                <div class="layer-option" data-layer="weather">
                    <img src="{{ asset('assets/leaflet/preview/weather.png') }}" alt="Cuaca">
                    <span>Cuaca</span>
                </div>
                <div class="layer-option" data-layer="air">
                    <img src="{{ asset('assets/leaflet/preview/air_quality.png') }}" alt="Kualitas Udara">
                    <span>Kualitas</span>
                </div>
            </div>
        </div>
        <div class="layer-section" data-section="overlays">
            <h5>Overlays</h5>
            <div class="layer-controls">
                <div class="layer-item">
                    <input type="checkbox" id="layer-traffic" checked>
                    <label for="layer-traffic">
                        <i class="fas fa-car"></i> Lalu Lintas
                    </label>
                </div>
                <div class="layer-item">
                    <input type="checkbox" id="layer-transit">
                    <label for="layer-transit">
                        <i class="fas fa-subway"></i> Transportasi
                    </label>
                </div>
                <div class="layer-item">
                    <input type="checkbox" id="layer-places" checked>
                    <label for="layer-places">
                        <i class="fas fa-map-marker-alt"></i> Tempat
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane-container" id="tab-routes">
        <div class="layer-section" data-section="directions">
            <h4 style="border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px;">
                <i class="fas fa-directions"></i> Petunjuk Arah
            </h4>
            <div class="route-controls">
                <div class="route-input-group">
                    <div class="input-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <input type="text" placeholder="Lokasi awal" id="route-from">
                    <button class="btn-current-location" title="Gunakan lokasi saat ini">
                        <i class="fas fa-location-arrow"></i>
                    </button>
                </div>
                <div class="route-input-group">
                    <div class="input-icon">
                        <i class="fas fa-flag-checkered"></i>
                    </div>
                    <input type="text" placeholder="Tujuan" id="route-to">
                </div>
                <div class="route-options" data-current-mode="driving">
                    <input type="hidden" id="route-type" value="driving">
                    <div class="travel-modes">
                        <button class="mode-btn" data-mode="driving" title="Mobil">
                            <i class="fas fa-car"></i>
                        </button>
                        <button class="mode-btn" data-mode="walking" title="Jalan Kaki">
                            <i class="fas fa-walking"></i>
                        </button>
                        <button class="mode-btn" data-mode="cycling" title="Sepeda">
                            <i class="fas fa-bicycle"></i>
                        </button>
                        <button class="mode-btn disabled" data-mode="transit" title="Belum tersedia">
                            <i class="fas fa-bus"></i>
                        </button>
                    </div>
                </div>
                <button class="btn-route primary" id="btn-get-route">
                    <i class="fas fa-route"></i> Dapatkan Rute
                </button>
            </div>
            <div class="route-results" id="route-results">
                <div class="route-summary">
                    <div class="route-time">
                        <i class="fas fa-clock"></i>
                        <span id="route-duration">--</span>
                    </div>
                    <div class="route-distance">
                        <i class="fas fa-road"></i>
                        <span id="route-distance">--</span>
                    </div>
                </div>
                <div class="route-steps" id="route-steps"></div>
            </div>
        </div>
    </div>
    <div class="tab-pane-container" id="tab-saved">
        <div class="layer-section" data-section="saved-locations">
            <h4><i class="fas fa-bookmark"></i> Lokasi Tersimpan</h4>
            <div class="saved-list" id="saved-list">
              <!-- Daftar lokasi akan muncul di sini via JS -->
            </div>
            <button class="btn-refresh-location" id="btn-refresh-current">
              <i class="fas fa-sync-alt"></i> Perbarui
            </button>
        </div>
    </div>
    <!-- Map Tools -->
    <div class="leaflet-sidebar right">
        <!-- Tab Buttons -->
        <div class="sidebar-tabs">
            <button class="tab-btn" data-tab="tab-layers" title="Layer Peta">
                <i class="fas fa-layer-group"></i>
            </button>
            <button class="tab-btn" data-tab="tab-routes" title="Petunjuk Arah">
                <i class="fas fa-route"></i>
            </button>
            <button class="tab-btn" data-tab="tab-saved" title="Tersimpan">
                <i class="fas fa-bookmark"></i>
            </button>
        </div>
        <div class="tool-separator"></div>
        <!-- Geolocation -->
        <div class="tool-btn" id="btn-geolocation" title="Lokasi Saya">
            <i class="fas fa-location-arrow"></i>
        </div>
        <!-- Zoom -->
        <div class="tool-btn" id="btn-zoom-in" title="Zoom In">
            <i class="fas fa-plus"></i>
        </div>
        <div class="tool-btn" id="btn-zoom-out" title="Zoom Out">
            <i class="fas fa-minus"></i>
        </div>
        <!-- Fullscreen -->
        <div class="tool-btn" id="btn-fullscreen" title="Layar Penuh">
            <i class="fas fa-expand"></i>
        </div>
        <div class="tool-separator"></div>
        <!-- Tools -->
        <div class="tool-btn" id="btn-compass" title="Kompas">
            <i class="fas fa-compass"></i>
        </div>
        <div class="tool-btn" id="btn-measure-line" title="Ukur Jarak">
            <i class="fas fa-ruler"></i>
        </div>
        <div class="tool-btn" id="btn-measure-area" title="Ukur Luas">
            <i class="fas fa-ruler-combined"></i>
        </div>
        <div class="tool-separator"></div>
        <!-- 3D & StreetView -->
        <div class="tool-btn" id="btn-3d" title="Tampilan 3D">
            <i class="fas fa-cube"></i>
        </div>
        <div class="tool-btn" id="btn-streetview" title="Street View">
            <i class="fas fa-street-view"></i>
        </div>
    </div>
    <!-- Bottom Panel - Map Status -->
    <div class="leaflet-statusbar">
        <div class="status-section address">
            <i class="fas fa-location-dot"></i>
            <span id="map-address">TomohonHebat Maps siap dipakai</span>
        </div>
        <div class="status-section coordinates">
            <i class="fas fa-globe-asia"></i>
            <span id="map-lat">0.0000</span>,
            <span id="map-lng">0.0000</span>
        </div>
        <div class="status-section">
            <i class="fas fa-map"></i>
            <span id="map-scale">Skala 0:0000</span>
        </div>
        <div class="status-section copyright">
            © <span id="copyright-year"></span>-TomohonHebat Maps &bull; Powered by <span id="map-copyright"> Leaflet</span>
        </div>
    </div>
    <!-- Street View Container -->
    <div class="streetview-container" id="streetview-container">
        <div class="streetview-header">
            <button class="btn-close-streetview" id="btn-close-streetview">
                <i class="fas fa-times"></i>
            </button>
            <h4>Street View</h4>
        </div>
        <div class="streetview-pano" id="streetview-pano"></div>
    </div>
</div>
@endsection
@section('stylesheet')
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        .main-content--immersive,
        .content-wrapper--immersive {
            min-height: var(--leaflet-app-height, 100vh);
            height: var(--leaflet-app-height, 100vh);
        }

        .content-wrapper--immersive {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }

        @supports (height: 100dvh) {
            :root {
                --leaflet-app-height: 100dvh;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="{{ asset('assets/templates/frontend/css/leaflet/core.css') }}"/>
    <link rel="stylesheet" href="{{ asset('assets/templates/frontend/css/leaflet/layout.css') }}"/>
    <link rel="stylesheet" href="{{ asset('assets/templates/frontend/css/leaflet/components.css') }}"/>
    <link rel="stylesheet" href="{{ asset('assets/templates/frontend/css/leaflet/mobile.css') }}" media="(max-width: 768px)"/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css"/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-compass/dist/leaflet-compass.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
@endsection
@section('javascript')
    {{-- Leaflet & Plugins --}}
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
    <script src="https://unpkg.com/leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.js"></script>
    <script src="https://unpkg.com/leaflet-compass/dist/leaflet-compass.min.js"></script>
    <script src="https://unpkg.com/leaflet-measure@3.1.0/dist/leaflet-measure.js"></script>
    <script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
    <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
    <script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
    {{-- Utils --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.3/sweetalert2.all.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    {{-- Core & Modules --}}
    <script src="{{ asset('assets/templates/frontend/js/leaflet/leaflet-core.js') }}"></script>
    <script src="{{ asset('assets/templates/frontend/js/leaflet/leaflet-map.js') }}"></script>
    <script src="{{ asset('assets/templates/frontend/js/leaflet/leaflet-controls.js') }}"></script>
    <script src="{{ asset('assets/templates/frontend/js/leaflet/leaflet-explorer.js') }}"></script>
    <script src="{{ asset('assets/templates/frontend/js/leaflet/leaflet-search.js') }}"></script>
    <script src="{{ asset('assets/templates/frontend/js/leaflet/leaflet-routing.js') }}"></script>
    <script src="{{ asset('assets/templates/frontend/js/leaflet/leaflet-layer-manager.js') }}"></script>
    <script src="{{ asset('assets/templates/frontend/js/leaflet/leaflet-geocoding.js') }}"></script>
    {{-- Widgets --}}
    <script src="{{ asset('assets/templates/frontend/js/leaflet/widgets/geolocation.js') }}"></script>
    <script src="{{ asset('assets/templates/frontend/js/leaflet/widgets/measure-tools.js') }}"></script>
    <script src="{{ asset('assets/templates/frontend/js/leaflet/widgets/heatmap.js') }}"></script>
    {{-- Initialization --}}
    <script>
        document.addEventListener('DOMContentLoaded', async function () {
            const syncMapViewportHeight = () => {
                const viewportHeight = window.visualViewport?.height || window.innerHeight || document.documentElement.clientHeight;
                document.documentElement.style.setProperty('--leaflet-app-height', `${Math.round(viewportHeight)}px`);
            };

            syncMapViewportHeight();

            const map = L.map('leaflet-map', {
                center: [1.3286065, 124.8150435],
                zoom: 13,
                minZoom: 13,
                maxZoom: 19,
                zoomControl: false,
                preferCanvas: true,
                fadeAnimation: true,
                markerZoomAnimation: true,
                attributionControl: false
            });
            const core = new LeafletCore(map);
            core.init();
            window.leafletMap = map;

            const handleMapViewportResize = _.throttle(() => {
                syncMapViewportHeight();
                window.requestAnimationFrame(() => {
                    map.invalidateSize(false);
                });
            }, 100);

            window.addEventListener('resize', handleMapViewportResize, { passive: true });
            window.addEventListener('orientationchange', handleMapViewportResize, { passive: true });
            window.visualViewport?.addEventListener('resize', handleMapViewportResize, { passive: true });

            const modules = {
                MapManager:        { class: LeafletMap, name: 'leafletmap' },
                LayerManager:      { class: LeafletLayerManager, name: 'leafletlayermanager' },
                Controls:          { class: LeafletControls, name: 'leafletcontrols' },
                Explorer:          { class: LeafletExplorer, name: 'leafletexplorer' },
                Search:            { class: LeafletSearch, name: 'leafletsearch' },
                Routing:           { class: LeafletRouting, name: 'leafletrouting' },
                Geocoding:         { class: LeafletGeocoding, name: 'leafletgeocoding' },
                MeasureTools:      { class: MeasureTools, name: 'measuretools' },
                HeatmapWidget:     { class: HeatmapWidget, name: 'heatmapwidget' },
                Geolocation:       { class: Geolocation, name: 'geolocation' }
            };
            const initOrder = [
                'MapManager',
                'LayerManager',
                'Controls',
                'Explorer',
                'Search',
                'Routing',
                'Geocoding',
                'MeasureTools',
                'HeatmapWidget',
                'Geolocation'
            ];
            const initializedModules = {};
            const initModule = (ModuleClass, name) => {
                try {
                    const module = new ModuleClass(map);
                    if (typeof module.init === 'function') {
                        module.init();
                    }
                    core.registerModule(module, name);
                    return module;
                } catch (error) {
                    console.error(`🚨 Failed to initialize ${name}:`, error);
                    if (window.debugMode) {
                        alert(`❌ Modul ${name} gagal: ${error.message}`);
                    }
                    return null;
                }
            };
            initOrder.forEach(key => {
                const config = modules[key];
                initializedModules[key] = initModule(config.class, config.name);
            });
            document.dispatchEvent(new Event('leaflet:all-modules-ready'));
            document.getElementById('btn-refresh-current')?.addEventListener('click', () => {
                loadSavedLocations();
            });
            loadSavedLocations();
            if (window.debugMode) {
                window.leafletModules = initializedModules;
                window.leafletMap = map;
                window.handleMapViewportResize = handleMapViewportResize;
                console.log('✅ Leaflet system initialized', {
                    map: map,
                    core: core,
                    modules: initializedModules
                });
            }
        });
    </script>
    {{-- Config --}}
    <script>
        window.IQAIR_API_KEY = "{{ config('services.iqair.key') }}";
        window.OPENWEATHER_API_KEY = "{{ config('services.openweather.key') }}";
        window.LEAFLET_CONFIG = {
            defaultCenter: [1.3286065, 124.8150435],
            defaultZoom: 13,
            minZoom: 13,
            maxZoom: 19
        };
        window.LEAFLET_ENDPOINTS = {
            explore: @json(route('peta.api.explore')),
            search: @json(route('peta.api.search')),
            markersGeoJson: @json(route('peta.api.markers')),
            markerDetailBase: @json(url('/peta/api/peta/markers')),
            savedMarkers: @json(route('public.markers.index'))
        };
        @if(app()->environment('local'))
            window.debugMode = true;
            console.log('🛠️ Running in development mode');
        @endif
    </script>
    <script>
    async function loadSavedLocations() {
        const list = document.getElementById('saved-list');
        if (!list) return;
        list.innerHTML = '<p><i class="fas fa-spinner fa-spin"></i> Memuat data...</p>';
        try {
            const response = await fetch(window.LEAFLET_ENDPOINTS.savedMarkers);
            const result = await response.json();
            const markers = Array.isArray(result?.data) ? result.data : [];

            if (markers.length) {
                list.innerHTML = '';
                markers.forEach(marker => {
                    const item = document.createElement('div');
                    item.className = 'saved-item';
                    item.innerHTML = `
                        <div class="saved-item-content">
                            <h5>${marker.title}</h5>
                            <p>${Number(marker.latitude).toFixed(6)}, ${Number(marker.longitude).toFixed(6)}</p>
                        </div>
                        <button class="btn-zoom-to" data-lat="${marker.latitude}" data-lng="${marker.longitude}">
                            <i class="fas fa-crosshairs"></i>
                        </button>
                    `;
                    list.appendChild(item);
                    item.querySelector('.btn-zoom-to')?.addEventListener('click', () => {
                        window.leafletMap?.setView([marker.latitude, marker.longitude], 16);
                    });
                });
            } else {
                list.innerHTML = '<p>Tidak ada lokasi tersimpan.</p>';
            }
        } catch (err) {
            console.error('❌ Gagal memuat lokasi:', err);
            list.innerHTML = '<p>Gagal memuat data lokasi.</p>';
        }
    }
    </script>
@endsection