@extends('layouts.app')

@section('title', 'Penelitian Gempa - Data Historis')

@section('content')
<div class="research-container">
    <div class="research-header">
        <h1>Penelitian Gempa Bumi</h1>
        <p>Data historis untuk analisis dan prediksi bahaya gempa bumi</p>
    </div>

    <!-- Statistik Ringkasan -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 2L2 7L12 12L22 7L12 2Z"/>
                    <path d="M2 17L12 22L22 17"/>
                    <path d="M2 12L12 17L22 12"/>
                </svg>
            </div>
            <div class="stat-number">{{ number_format($statistics['total_kejadian']) }}</div>
            <div class="stat-label">Total Kejadian</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
                    <path d="M12 22V12"/>
                    <path d="M9 10.5L12 12L15 10.5"/>
                </svg>
            </div>
            <div class="stat-number">{{ number_format($statistics['rata_magnitude'], 1) }}</div>
            <div class="stat-label">Rata-rata Magnitude</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M12 8v4l3 3M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"/>
                    <circle cx="12" cy="12" r="2"/>
                </svg>
            </div>
            <div class="stat-number">{{ number_format($statistics['magnitude_tertinggi'], 1) }}</div>
            <div class="stat-label">Magnitude Tertinggi</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="32" height="32" 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"/>
                    <line x1="16" y1="2" x2="16" y2="6"/>
                    <line x1="8" y1="2" x2="8" y2="6"/>
                    <line x1="3" y1="10" x2="21" y2="10"/>
                    <circle cx="12" cy="15" r="1"/>
                    <circle cx="16" cy="15" r="1"/>
                    <circle cx="8" cy="15" r="1"/>
                </svg>
            </div>
            <div class="stat-number">{{ $statistics['kejadian_bulan_ini'] }}</div>
            <div class="stat-label">Kejadian Bulan Ini</div>
        </div>
    </div>

    <!-- Grafik Tren -->
    <div class="chart-card">
        <div class="chart-header">
            <div class="chart-icon">
                <svg width="24" height="24" 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>
            </div>
            <h3>Tren Gempa 6 Bulan Terakhir</h3>
        </div>
        <canvas id="gempaChart" height="100"></canvas>
    </div>

    <!-- Filter Pencarian -->
    <div class="filter-card">
        <div class="filter-header">
            <div class="filter-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="11" cy="11" r="8"/>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
            </div>
            <h3>Filter Data</h3>
        </div>
        <form method="GET" class="filter-form">
            <div class="filter-group">
                <label>Dari Tanggal</label>
                <input type="date" name="start_date" value="{{ request('start_date') }}">
            </div>
            <div class="filter-group">
                <label>Sampai Tanggal</label>
                <input type="date" name="end_date" value="{{ request('end_date') }}">
            </div>
            <div class="filter-group">
                <label>Min Magnitude</label>
                <input type="number" step="0.1" name="min_magnitude" value="{{ request('min_magnitude') }}" placeholder="Contoh: 5.0">
            </div>
            <div class="filter-group">
                <label>Lokasi</label>
                <input type="text" name="lokasi" value="{{ request('lokasi') }}" placeholder="Cari lokasi...">
            </div>
            <div class="filter-actions">
                <button type="submit" class="btn-filter">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="11" cy="11" r="8"/>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                    </svg>
                    Filter
                </button>
                <a href="{{ route('research.gempa') }}" class="btn-reset">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M23 4v6h-6M1 20v-6h6"/>
                        <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"/>
                    </svg>
                    Reset
                </a>
                <a href="{{ route('research.export') }}?{{ http_build_query(request()->all()) }}" class="btn-export">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                        <polyline points="7 10 12 15 17 10"/>
                        <line x1="12" y1="15" x2="12" y2="3"/>
                    </svg>
                    Export Data
                </a>
            </div>
        </form>
    </div>

    <!-- Tabel Data Gempa -->
    <div class="data-table-container">
        <div class="table-header">
            <div class="table-icon">
                <svg width="20" height="20" 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"/>
                    <line x1="16" y1="2" x2="16" y2="6"/>
                    <line x1="8" y1="2" x2="8" y2="6"/>
                    <line x1="3" y1="10" x2="21" y2="10"/>
                </svg>
            </div>
            <h3>Data Kejadian Gempa</h3>
        </div>
        <table class="data-table">
            <thead>
                <tr>
                    <th>Waktu Kejadian</th>
                    <th>Lokasi</th>
                    <th>Magnitude</th>
                    <th>Intensitas</th>
                    <th>Kedalaman</th>
                    <th>Status</th>
                    <th>Potensi Tsunami</th>
                </tr>
            </thead>
            <tbody>
                @forelse($gempaData as $gempa)
                <tr>
                    <td>
                        <div class="waktu-cell">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <circle cx="12" cy="12" r="10"/>
                                <polyline points="12 6 12 12 16 14"/>
                            </svg>
                            {{ $gempa->waktu_kejadian->format('d/m/Y H:i:s') }}
                        </div>
                    </td>
                    <td>
                        <div class="lokasi-cell">
                            <svg width="14" height="14" 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"/>
                                <circle cx="12" cy="10" r="3"/>
                            </svg>
                            {{ $gempa->lokasi }}
                        </div>
                    </td>
                    <td><strong>{{ number_format($gempa->magnitude, 1) }}</strong></td>
                    <td>{{ number_format($gempa->intensitas) }}</td>
                    <td>{{ $gempa->kedalaman ?? '-' }} km</td>
                    <td>
                        <span class="status-badge status-{{ strtolower($gempa->status) }}">
                            {{ $gempa->status }}
                        </span>
                    </td>
                    <td>
                        @if($gempa->is_tsunami_potential)
                            <span class="tsunami-badge">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M12 8v4l3 3M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"/>
                                </svg>
                                Berpotensi
                            </span>
                        @else
                            <span class="safe-badge">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="20 6 9 17 4 12"/>
                                </svg>
                                Aman
                            </span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" style="text-align: center;">Belum ada data gempa</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="pagination-container">
        {{ $gempaData->appends(request()->query())->links() }}
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const chartData = @json($chartData);
    
    const ctx = document.getElementById('gempaChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: chartData.months,
            datasets: [
                {
                    label: 'Jumlah Kejadian',
                    data: chartData.counts,
                    borderColor: '#dc2626',
                    backgroundColor: 'rgba(220, 38, 38, 0.1)',
                    tension: 0.3,
                    fill: true,
                    yAxisID: 'y'
                },
                {
                    label: 'Rata-rata Magnitude',
                    data: chartData.avgMagnitude,
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    tension: 0.3,
                    fill: true,
                    yAxisID: 'y1'
                }
            ]
        },
        options: {
            responsive: true,
            interaction: { mode: 'index', intersect: false },
            plugins: { legend: { position: 'top' } },
            scales: {
                y: { title: { display: true, text: 'Jumlah Kejadian' }, beginAtZero: true },
                y1: { position: 'right', title: { display: true, text: 'Magnitude' }, beginAtZero: true, grid: { drawOnChartArea: false } }
            }
        }
    });
});
</script>

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

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

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

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

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

.stat-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: #dc2626;
}

.stat-icon {
    width: 56px;
    height: 56px;
    background: #fef2f2;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #dc2626;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
}

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

.chart-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.chart-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

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

.chart-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.filter-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.filter-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.filter-icon {
    width: 32px;
    height: 32px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
}

.filter-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.filter-group {
    flex: 1;
    min-width: 150px;
}

.filter-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #6b7280;
}

.filter-group input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.filter-group input:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.filter-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-filter, .btn-reset, .btn-export {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.btn-filter {
    background: #dc2626;
    color: white;
    border: none;
}

.btn-filter:hover {
    background: #b91c1c;
}

.btn-reset {
    background: #f3f4f6;
    color: #374151;
}

.btn-reset:hover {
    background: #e5e7eb;
}

.btn-export {
    background: #10b981;
    color: white;
}

.btn-export:hover {
    background: #059669;
}

.data-table-container {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.table-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fafafa;
}

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

.table-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

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

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

.data-table th {
    background: #f9fafb;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
}

.data-table td {
    font-size: 0.875rem;
    color: #1f2937;
}

.waktu-cell, .lokasi-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.waktu-cell svg, .lokasi-cell svg {
    color: #9ca3af;
    flex-shrink: 0;
}

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

.status-berbahaya { background: #fef2f2; color: #dc2626; }
.status-tinggi { background: #fffbeb; color: #f59e0b; }
.status-sedang { background: #eff6ff; color: #3b82f6; }
.status-ringan { background: #f0fdf4; color: #10b981; }

.tsunami-badge, .safe-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.tsunami-badge {
    background: #fef2f2;
    color: #dc2626;
}

.safe-badge {
    background: #f0fdf4;
    color: #10b981;
}

.pagination-container {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
}

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

@media (max-width: 768px) {
    .research-container {
        padding: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-icon {
        width: 44px;
        height: 44px;
    }
    
    .stat-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .filter-form {
        flex-direction: column;
    }
    
    .filter-actions {
        flex-wrap: wrap;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.75rem;
    }
    
    .data-table {
        font-size: 0.75rem;
    }
}
</style>
@endsection