@extends('layouts.app')

@section('title', 'Peta Seismik')

@section('content')
<div class="peta-container">
    <div class="peta-header">
        <h1>Peta Seismik</h1>
        <p>Visualisasi sebaran gempa dan lokasi sensor</p>
    </div>

    <div class="peta-main">
        <div id="map" class="map-container"></div>
        
        <div class="peta-sidebar">
            <div class="legend-card">
                <h3>Keterangan</h3>
                <div class="legend-item">
                    <span class="legend-marker gempa-besar"></span>
                    <span>Gempa > Magnitude 5</span>
                </div>
                <div class="legend-item">
                    <span class="legend-marker gempa-sedang"></span>
                    <span>Gempa 3-5 Magnitude</span>
                </div>
                <div class="legend-item">
                    <span class="legend-marker gempa-kecil"></span>
                    <span>Gempa < Magnitude 3</span>
                </div>
                <div class="legend-item">
                    <span class="legend-marker sensor-online"></span>
                    <span>Sensor Online</span>
                </div>
                <div class="legend-item">
                    <span class="legend-marker sensor-offline"></span>
                    <span>Sensor Offline</span>
                </div>
            </div>

            <div class="stats-card">
                <h3>Statistik Gempa Hari Ini</h3>
                <div class="stats-list">
                    <div class="stat-row">
                        <span>Total Gempa</span>
                        <span class="stat-number" id="totalGempa">3</span>
                    </div>
                    <div class="stat-row">
                        <span>Magnitude Tertinggi</span>
                        <span class="stat-number" id="magnitudeTertinggi">5.2</span>
                    </div>
                    <div class="stat-row">
                        <span>Sensor Aktif</span>
                        <span class="stat-number" id="sensorAktif">1</span>
                    </div>
                </div>
            </div>

            <div class="gempa-list">
                <h3>Kejadian Gempa Terkini</h3>
                <div class="gempa-item">
                    <div class="gempa-time">07:35:00</div>
                    <div class="gempa-location">Selatan Bali</div>
                    <div class="gempa-magnitude">M 5.2</div>
                </div>
                <div class="gempa-item">
                    <div class="gempa-time">04:22:00</div>
                    <div class="gempa-location">Timur Lombok</div>
                    <div class="gempa-magnitude">M 3.8</div>
                </div>
                <div class="gempa-item">
                    <div class="gempa-time">01:15:00</div>
                    <div class="gempa-location">Barat Daya Sumba</div>
                    <div class="gempa-magnitude">M 4.1</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Leaflet CSS & JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<style>
.peta-container {
    padding: 2rem;
    background: #f5f7fa;
    min-height: calc(100vh - 200px);
}

.peta-header {
    text-align: center;
    margin-bottom: 2rem;
}

.peta-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.peta-header p {
    color: #6b7280;
}

.peta-main {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.map-container {
    height: 600px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.peta-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.legend-card, .stats-card, .gempa-list {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
}

.legend-card h3, .stats-card h3, .gempa-list h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #dc2626;
    display: inline-block;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.legend-marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
}

.legend-marker.gempa-besar {
    background: #dc2626;
    width: 24px;
    height: 24px;
}

.legend-marker.gempa-sedang {
    background: #f59e0b;
    width: 18px;
    height: 18px;
}

.legend-marker.gempa-kecil {
    background: #10b981;
    width: 12px;
    height: 12px;
}

.legend-marker.sensor-online {
    background: #3b82f6;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #3b82f6;
}

.legend-marker.sensor-offline {
    background: #9ca3af;
    border: 2px solid white;
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.stat-row span:first-child {
    font-size: 0.875rem;
    color: #6b7280;
}

.stat-number {
    font-weight: 700;
    font-size: 1.125rem;
    color: #dc2626;
}

.gempa-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.gempa-item:last-child {
    border-bottom: none;
}

.gempa-time {
    font-size: 0.75rem;
    color: #6b7280;
    min-width: 70px;
}

.gempa-location {
    font-size: 0.875rem;
    font-weight: 500;
    flex: 1;
    margin: 0 0.5rem;
}

.gempa-magnitude {
    font-size: 0.875rem;
    font-weight: 700;
    color: #dc2626;
}

@media (max-width: 900px) {
    .peta-container {
        padding: 1rem;
    }
    
    .peta-main {
        grid-template-columns: 1fr;
    }
    
    .map-container {
        height: 400px;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Inisialisasi peta dengan titik tengah Indonesia
    const map = L.map('map').setView([-2.5, 118.0], 5);
    
    // Tile layer dari OpenStreetMap
    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
        subdomains: 'abcd',
        maxZoom: 19,
        minZoom: 3
    }).addTo(map);
    
    // Data gempa (contoh)
    const gempaData = [
        { lat: -8.34, lng: 115.20, magnitude: 5.2, waktu: '07:35:00', lokasi: 'Selatan Bali' },
        { lat: -8.85, lng: 116.85, magnitude: 3.8, waktu: '04:22:00', lokasi: 'Timur Lombok' },
        { lat: -9.80, lng: 119.00, magnitude: 4.1, waktu: '01:15:00', lokasi: 'Barat Daya Sumba' },
        { lat: -6.20, lng: 106.80, magnitude: 2.5, waktu: '22:30:00', lokasi: 'Jakarta' },
        { lat: -3.70, lng: 128.50, magnitude: 4.5, waktu: '15:45:00', lokasi: 'Ambon' }
    ];
    
    // Fungsi untuk menentukan warna marker berdasarkan magnitude
    function getMarkerColor(magnitude) {
        if (magnitude >= 5) return '#dc2626';
        if (magnitude >= 3) return '#f59e0b';
        return '#10b981';
    }
    
    // Fungsi untuk menentukan ukuran marker berdasarkan magnitude
    function getMarkerSize(magnitude) {
        if (magnitude >= 5) return 24;
        if (magnitude >= 3) return 16;
        return 10;
    }
    
    // Tambahkan marker untuk setiap gempa
    gempaData.forEach(gempa => {
        const color = getMarkerColor(gempa.magnitude);
        const size = getMarkerSize(gempa.magnitude);
        
        const customIcon = L.divIcon({
            html: `<div style="
                width: ${size}px;
                height: ${size}px;
                background: ${color};
                border-radius: 50%;
                border: 2px solid white;
                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
                cursor: pointer;
            "></div>`,
            iconSize: [size, size],
            className: 'custom-marker'
        });
        
        const marker = L.marker([gempa.lat, gempa.lng], { icon: customIcon }).addTo(map);
        
        marker.bindPopup(`
            <strong>${gempa.lokasi}</strong><br>
            Magnitude: ${gempa.magnitude}<br>
            Waktu: ${gempa.waktu}<br>
            <a href="#">Detail</a>
        `);
    });
    
    // Tambahkan marker sensor (contoh)
    const sensorLocations = [
        { lat: -7.78, lng: 110.36, name: 'Sensor Yogyakarta', status: 'online' },
        { lat: -6.20, lng: 106.85, name: 'Sensor Jakarta', status: 'online' },
        { lat: -8.65, lng: 115.22, name: 'Sensor Bali', status: 'online' }
    ];
    
    sensorLocations.forEach(sensor => {
        const sensorIcon = L.divIcon({
            html: `<div style="
                width: 12px;
                height: 12px;
                background: ${sensor.status === 'online' ? '#3b82f6' : '#9ca3af'};
                border-radius: 50%;
                border: 2px solid white;
                box-shadow: 0 0 0 2px ${sensor.status === 'online' ? '#3b82f6' : '#9ca3af'};
            "></div>`,
            iconSize: [12, 12],
            className: 'sensor-marker'
        });
        
        const marker = L.marker([sensor.lat, sensor.lng], { icon: sensorIcon }).addTo(map);
        marker.bindPopup(`<strong>${sensor.name}</strong><br>Status: ${sensor.status === 'online' ? 'Online ✅' : 'Offline ❌'}`);
    });
    
    // Update statistik
    document.getElementById('totalGempa').innerText = gempaData.length;
    const maxMagnitude = Math.max(...gempaData.map(g => g.magnitude));
    document.getElementById('magnitudeTertinggi').innerText = maxMagnitude;
    document.getElementById('sensorAktif').innerText = sensorLocations.filter(s => s.status === 'online').length;
});
</script>
@endsection