@extends('layouts.super-admin')

@section('title', 'Analytics')
@section('page-title', 'Analytics Dashboard')
@section('page-description', 'Data analytics dan statistik gempa')

@section('content')
<div class="analytics-content">
    <!-- Stats Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-value">{{ number_format($earthquakeStats['total']) }}</div>
            <div class="stat-label">Total Earthquakes</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ number_format($earthquakeStats['avg_magnitude'], 1) }}</div>
            <div class="stat-label">Average Magnitude</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ number_format($earthquakeStats['max_magnitude'], 1) }}</div>
            <div class="stat-label">Highest Magnitude</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ number_format($earthquakeStats['last_30d']) }}</div>
            <div class="stat-label">Last 30 Days</div>
        </div>
    </div>

    <!-- Chart -->
    <div class="card-section">
        <div class="card-header">
            <h3>Earthquake Trend (12 Months)</h3>
        </div>
        <div class="chart-container">
            <canvas id="trendChart" height="300"></canvas>
        </div>
    </div>

    <!-- Top Locations -->
    <div class="card-section">
        <div class="card-header">
            <h3>Top 10 Locations by Earthquake Frequency</h3>
        </div>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr><th>Location</th><th>Total Earthquakes</th><th>% of Total</th></tr>
                </thead>
                <tbody>
                    @foreach($topLocations as $loc)
                    <tr>
                        <td>{{ $loc->lokasi }}</td>
                        <td>{{ number_format($loc->total) }}</td>
                        <td>{{ round(($loc->total / max($earthquakeStats['total'], 1)) * 100, 1) }}%</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('trendChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: @json($trendData['labels']),
        datasets: [{
            label: 'Earthquakes',
            data: @json($trendData['counts']),
            borderColor: '#dc2626',
            backgroundColor: 'rgba(220,38,38,0.1)',
            tension: 0.3,
            fill: true
        }]
    },
    options: { responsive: true, maintainAspectRatio: true }
});
</script>

<style>
.analytics-content { max-width: 1400px; margin: 0 auto; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.stat-value { font-size: 1.875rem; font-weight: 700; color: #dc2626; }
.stat-label { font-size: 0.875rem; color: #64748b; }
.card-section {
    background: white;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}
.chart-container { padding: 1.5rem; }
</style>
@endsection