@extends('layouts.app')

@section('title', 'Riwayat Gempa')

@section('content')
<div class="history-container">
    <div class="history-header">
        <h1>Riwayat Gempa</h1>
        <p>Data historis kejadian gempa yang terdeteksi sistem</p>
    </div>

    <div class="filter-section">
        <div class="filter-group">
            <label>Cari Lokasi</label>
            <input type="text" id="searchInput" placeholder="Cari lokasi gempa..." class="filter-input">
        </div>
        <div class="filter-group">
            <label>Filter Magnitude</label>
            <select id="magnitudeFilter" class="filter-select">
                <option value="all">Semua Magnitude</option>
                <option value="5">> Magnitude 5</option>
                <option value="3-5">Magnitude 3 - 5</option>
                <option value="3">< Magnitude 3</option>
            </select>
        </div>
        <div class="filter-group">
            <label>Urutkan</label>
            <select id="sortFilter" class="filter-select">
                <option value="newest">Terbaru</option>
                <option value="oldest">Terlama</option>
                <option value="magnitude">Magnitude Tertinggi</option>
            </select>
        </div>
    </div>

    <div class="history-table-container">
        <table class="history-table">
            <thead>
                <tr>
                    <th>Waktu</th>
                    <th>Lokasi</th>
                    <th>Koordinat</th>
                    <th>Magnitude</th>
                    <th>Kedalaman</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody id="historyTableBody">
                <!-- Data akan diisi JavaScript -->
            </tbody>
        </table>
    </div>

    <div class="pagination">
        <button class="page-btn" id="prevBtn">‹ Sebelumnya</button>
        <span id="pageInfo">Halaman 1 dari 1</span>
        <button class="page-btn" id="nextBtn">Selanjutnya ›</button>
    </div>
</div>

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

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

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

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

.filter-section {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    background: #f9fafb;
    padding: 1.5rem;
    border-radius: 12px;
}

.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-input, .filter-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
}

.filter-input:focus, .filter-select:focus {
    outline: none;
    border-color: #dc2626;
}

.history-table-container {
    overflow-x: auto;
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

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

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

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

.history-table td {
    font-size: 0.875rem;
}

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

.status-tinggi {
    background: #fef2f2;
    color: #dc2626;
}

.status-sedang {
    background: #fffbeb;
    color: #f59e0b;
}

.status-ringan {
    background: #f0fdf4;
    color: #10b981;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.page-btn {
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover {
    border-color: #dc2626;
    color: #dc2626;
}

@media (max-width: 768px) {
    .history-container {
        padding: 1rem;
    }
    
    .filter-section {
        flex-direction: column;
    }
    
    .history-table th,
    .history-table td {
        padding: 0.75rem;
    }
}
</style>

<script>
// Data riwayat gempa simulasi
let allGempaData = [
    { waktu: '2026-05-09 07:35:00', lokasi: 'Selatan Bali', koordinat: '8.34° LS, 115.20° BT', magnitude: 5.2, kedalaman: '12 km', status: 'Tinggi' },
    { waktu: '2026-05-09 04:22:00', lokasi: 'Timur Lombok', koordinat: '8.85° LS, 116.85° BT', magnitude: 3.8, kedalaman: '8 km', status: 'Sedang' },
    { waktu: '2026-05-09 01:15:00', lokasi: 'Barat Daya Sumba', koordinat: '9.80° LS, 119.00° BT', magnitude: 4.1, kedalaman: '15 km', status: 'Sedang' },
    { waktu: '2026-05-08 22:30:00', lokasi: 'Jakarta', koordinat: '6.20° LS, 106.80° BT', magnitude: 2.5, kedalaman: '5 km', status: 'Ringan' },
    { waktu: '2026-05-08 15:45:00', lokasi: 'Ambon', koordinat: '3.70° LS, 128.50° BT', magnitude: 4.5, kedalaman: '10 km', status: 'Sedang' },
    { waktu: '2026-05-08 08:20:00', lokasi: 'Padang', koordinat: '0.95° LS, 100.35° BT', magnitude: 5.8, kedalaman: '25 km', status: 'Tinggi' },
    { waktu: '2026-05-07 19:10:00', lokasi: 'Manado', koordinat: '1.49° LU, 124.84° BT', magnitude: 3.2, kedalaman: '6 km', status: 'Ringan' },
    { waktu: '2026-05-07 12:05:00', lokasi: 'Banda Aceh', koordinat: '5.55° LU, 95.32° BT', magnitude: 4.8, kedalaman: '18 km', status: 'Sedang' },
];

let currentPage = 1;
let itemsPerPage = 10;
let filteredData = [...allGempaData];

function getStatusClass(status) {
    switch(status) {
        case 'Tinggi': return 'status-tinggi';
        case 'Sedang': return 'status-sedang';
        default: return 'status-ringan';
    }
}

function renderTable() {
    const start = (currentPage - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    const pageData = filteredData.slice(start, end);
    
    const tbody = document.getElementById('historyTableBody');
    tbody.innerHTML = '';
    
    pageData.forEach(item => {
        const row = tbody.insertRow();
        row.insertCell(0).textContent = item.waktu;
        row.insertCell(1).textContent = item.lokasi;
        row.insertCell(2).textContent = item.koordinat;
        row.insertCell(3).textContent = `M ${item.magnitude}`;
        row.insertCell(4).textContent = item.kedalaman;
        row.insertCell(5).innerHTML = `<span class="status-badge ${getStatusClass(item.status)}">${item.status}</span>`;
    });
    
    const totalPages = Math.ceil(filteredData.length / itemsPerPage);
    document.getElementById('pageInfo').textContent = `Halaman ${currentPage} dari ${totalPages || 1}`;
    
    document.getElementById('prevBtn').disabled = currentPage === 1;
    document.getElementById('nextBtn').disabled = currentPage === totalPages || totalPages === 0;
}

function applyFilters() {
    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
    const magnitudeFilter = document.getElementById('magnitudeFilter').value;
    const sortFilter = document.getElementById('sortFilter').value;
    
    filteredData = allGempaData.filter(item => {
        // Filter lokasi
        const matchesSearch = item.lokasi.toLowerCase().includes(searchTerm);
        
        // Filter magnitude
        let matchesMagnitude = true;
        if (magnitudeFilter === '5') {
            matchesMagnitude = item.magnitude >= 5;
        } else if (magnitudeFilter === '3-5') {
            matchesMagnitude = item.magnitude >= 3 && item.magnitude < 5;
        } else if (magnitudeFilter === '3') {
            matchesMagnitude = item.magnitude < 3;
        }
        
        return matchesSearch && matchesMagnitude;
    });
    
    // Sorting
    if (sortFilter === 'newest') {
        filteredData.sort((a, b) => new Date(b.waktu) - new Date(a.waktu));
    } else if (sortFilter === 'oldest') {
        filteredData.sort((a, b) => new Date(a.waktu) - new Date(b.waktu));
    } else if (sortFilter === 'magnitude') {
        filteredData.sort((a, b) => b.magnitude - a.magnitude);
    }
    
    currentPage = 1;
    renderTable();
}

// Event listeners
document.getElementById('searchInput').addEventListener('input', applyFilters);
document.getElementById('magnitudeFilter').addEventListener('change', applyFilters);
document.getElementById('sortFilter').addEventListener('change', applyFilters);
document.getElementById('prevBtn').addEventListener('click', () => {
    if (currentPage > 1) {
        currentPage--;
        renderTable();
    }
});
document.getElementById('nextBtn').addEventListener('click', () => {
    const totalPages = Math.ceil(filteredData.length / itemsPerPage);
    if (currentPage < totalPages) {
        currentPage++;
        renderTable();
    }
});

// Initial render
renderTable();
</script>
@endsection