@extends('layouts.app')

@section('title', 'Dashboard Monitoring')

@section('content')
<div class="dashboard-container">
    <!-- Header Dashboard -->
    <div class="dashboard-header">
        <div>
            <h1>Dashboard Monitoring</h1>
            <p class="text-gray-500">Data real-time dari sensor detektor gempa</p>
        </div>
        <div class="dashboard-actions">
            <button class="btn-refresh" id="refreshData">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M23 4v6h-6M1 20v-6h6" stroke="currentColor"/>
                    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" stroke="currentColor"/>
                </svg>
                Refresh
            </button>
        </div>
    </div>

    <!-- Stat Cards -->
    <div class="stat-grid">
        <div class="stat-card">
            <div class="stat-icon">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M2 12L7 12M12 2L12 7M22 12L17 12M12 22L12 17M4.93 4.93L8.4 8.4M19.07 4.93L15.6 8.4M19.07 19.07L15.6 15.6M4.93 19.07L8.4 15.6" stroke="currentColor"/>
                    <circle cx="12" cy="12" r="3" stroke="currentColor"/>
                </svg>
            </div>
            <div>
                <div class="stat-label">Magnitude</div>
                <div class="stat-value" id="magnitudeValue">5.2</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor"/>
                    <path d="M2 17L12 22L22 17" stroke="currentColor"/>
                </svg>
            </div>
            <div>
                <div class="stat-label">Status</div>
                <div class="stat-value" id="statusValue">
                    <span class="status-badge status-siaga">Siaga</span>
                </div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="12" cy="12" r="10" stroke="currentColor"/>
                    <polyline points="12 6 12 12 16 14" stroke="currentColor"/>
                </svg>
            </div>
            <div>
                <div class="stat-label">Waktu</div>
                <div class="stat-value" id="waktuValue">--:--:--</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M12 2V22M12 2L8 6M12 2L16 6M12 22L8 18M12 22L16 18" stroke="currentColor"/>
                    <line x1="4" y1="12" x2="20" y2="12" stroke="currentColor"/>
                </svg>
            </div>
            <div>
                <div class="stat-label">Kedalaman</div>
                <div class="stat-value" id="kedalamanValue">12 km</div>
            </div>
        </div>
    </div>

    <!-- Grafik dan Informasi -->
    <div class="dashboard-grid">
        <!-- Grafik Getaran -->
        <div class="card chart-card">
            <div class="card-header">
                <div class="flex items-center gap-2">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M2 20L22 20" stroke="currentColor"/>
                        <path d="M4 16L7 10L10 13L15 5L18 9L20 4" stroke="currentColor"/>
                    </svg>
                    <h2>Grafik Getaran Real-Time</h2>
                </div>
                <span class="text-gray-500 text-sm">Update setiap 2 detik</span>
            </div>
            <canvas id="gempaChart" height="300"></canvas>
        </div>

        <!-- Informasi Gempa Terkini -->
        <div class="card info-card">
            <div class="card-header">
                <div class="flex items-center gap-2">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" stroke="currentColor"/>
                        <circle cx="12" cy="10" r="3" stroke="currentColor"/>
                    </svg>
                    <h2>Informasi Gempa</h2>
                </div>
            </div>
            <div class="info-content">
                <div class="info-row">
                    <span class="info-label">Lokasi Pusat Gempa</span>
                    <span class="info-value" id="lokasiValue">80 km Tenggara Denpasar, Bali</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Koordinat</span>
                    <span class="info-value" id="koordinatValue">8.34° LS, 115.20° BT</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Potensi Tsunami</span>
                    <span class="info-value" id="tsunamiValue">Tidak Berpotensi</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Status Sensor</span>
                    <span class="info-value">
                        <span class="sensor-status online"></span> Sensor Terhubung
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Riwayat Getaran -->
    <div class="card riwayat-card">
        <div class="card-header">
            <div class="flex items-center gap-2">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor"/>
                    <line x1="16" y1="2" x2="16" y2="6" stroke="currentColor"/>
                    <line x1="8" y1="2" x2="8" y2="6" stroke="currentColor"/>
                    <line x1="3" y1="10" x2="21" y2="10" stroke="currentColor"/>
                </svg>
                <h2>Riwayat Getaran Terkini</h2>
            </div>
        </div>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Waktu</th>
                        <th>Nilai Getaran</th>
                        <th>Status</th>
                        <th>Keterangan</th>
                    </tr>
                </thead>
                <tbody id="riwayatTable">
                    <!-- Data akan diisi JavaScript -->
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    // Data awal
    let chartData = {
        labels: [],
        values: []
    };
    
    let chart;
    
    // Inisialisasi chart
    function initChart() {
        const ctx = document.getElementById('gempaChart').getContext('2d');
        chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Intensitas Getaran',
                    data: [],
                    borderColor: '#dc2626',
                    backgroundColor: 'rgba(220, 38, 38, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.3,
                    pointRadius: 4,
                    pointBackgroundColor: '#dc2626'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `Intensitas: ${context.raw.toLocaleString()} unit`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Intensitas Getaran'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Waktu'
                        }
                    }
                }
            }
        });
    }
    
    // Update waktu real-time
    function updateRealTimeClock() {
        const now = new Date();
        const waktuString = now.toLocaleTimeString('id-ID');
        document.getElementById('waktuValue').innerHTML = waktuString;
    }
    
    // Simulasi data
    function generateSimulatedData() {
        return Math.floor(Math.random() * 2000) + 100;
    }
    
    function addDataPoint(value) {
        const now = new Date();
        const timeLabel = now.toLocaleTimeString('id-ID');
        
        // Update chart
        chart.data.labels.push(timeLabel);
        chart.data.datasets[0].data.push(value);
        
        if (chart.data.labels.length > 10) {
            chart.data.labels.shift();
            chart.data.datasets[0].data.shift();
        }
        
        chart.update();
        
        // Update tabel riwayat
        const tbody = document.getElementById('riwayatTable');
        const newRow = tbody.insertRow(0);
        
        newRow.insertCell(0).textContent = timeLabel;
        newRow.insertCell(1).textContent = value.toLocaleString() + ' unit';
        
        let statusText, statusColor, keterangan;
        if (value > 1500) {
            statusText = 'Tinggi';
            statusColor = '#dc2626';
            keterangan = 'Waspada!';
        } else if (value > 500) {
            statusText = 'Sedang';
            statusColor = '#f59e0b';
            keterangan = 'Terasa';
        } else {
            statusText = 'Normal';
            statusColor = '#10b981';
            keterangan = 'Aman';
        }
        
        newRow.insertCell(2).innerHTML = `<span style="color: ${statusColor};">●</span> ${statusText}`;
        newRow.insertCell(3).textContent = keterangan;
        
        // Batasi maksimal 10 baris
        while (tbody.rows.length > 10) {
            tbody.deleteRow(10);
        }
        
        // Update magnitude dan status jika perlu
        if (value > 1500) {
            document.getElementById('magnitudeValue').innerHTML = (4 + (value / 1000)).toFixed(1);
            const statusBadge = document.querySelector('#statusValue .status-badge');
            statusBadge.className = 'status-badge status-waspada';
            statusBadge.innerHTML = 'Waspada';
        }
    }
    
    // Inisialisasi
    document.addEventListener('DOMContentLoaded', function() {
        initChart();
        updateRealTimeClock();
        setInterval(updateRealTimeClock, 1000);
        
        // Simulasi data awal
        const initialData = [120, 450, 890, 2340, 1870, 560];
        initialData.forEach(val => {
            setTimeout(() => addDataPoint(val), 100);
        });
        
        // Simulasi data baru setiap 3 detik
        setInterval(() => {
            const newValue = generateSimulatedData();
            addDataPoint(newValue);
        }, 3000);
        
        // Tombol refresh
        document.getElementById('refreshData').addEventListener('click', function() {
            location.reload();
        });
    });
</script>

<style>
.dashboard-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.dashboard-header h1 {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.btn-refresh {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-refresh:hover {
    background: #f9fafb;
    border-color: #dc2626;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 48px;
    height: 48px;
    background: #fef2f2;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
}

.stat-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-siaga {
    background-color: #fef3c7;
    color: #92400e;
}

.status-waspada {
    background-color: #fee2e2;
    color: #991b1b;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.card {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e5e5;
}

.card-header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.chart-card {
    padding: 1rem;
}

.info-content {
    padding: 1rem 1.5rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 0.875rem;
    color: #6b7280;
}

.info-value {
    font-weight: 500;
    color: #1a1a1a;
}

.sensor-status {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.sensor-status.online {
    background-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.riwayat-card {
    margin-top: 0;
}

.table-responsive {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e5e5;
}

.data-table th {
    font-weight: 500;
    color: #6b7280;
    font-size: 0.875rem;
    background: #f9fafb;
}

@media (max-width: 1024px) {
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dashboard-container {
        padding: 1rem;
    }
    
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .stat-grid {
        grid-template-columns: 1fr;
    }
}
</style>
@endpush