<?php
/**
 * deprem.php - aahaber.com Son Depremler Haritası & Canlı Liste
 */

$page_title = "Son Depremler — aahaber.com Canlı Deprem Takip Haritası";
$page_desc = "Kandilli Rasathanesi ve AFAD verileriyle Türkiye ve çevresindeki son depremler. Canlı deprem haritası, şiddet ve derinlik verileri.";
$page_active = "deprem";
$search_placeholder = "Konum veya tarih ara (örn: Hatay, İzmir, Balıkesir)...";
$extra_css = ['https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'];

require_once __DIR__ . '/ust.php';
?>

<div class="deprem-page-container">

  <!-- 1. Breadcrumb ve Sayfa Başlığı -->
  <div class="deprem-header-banner">
    <div class="deprem-breadcrumb">
      <a href="index.php">Haberler</a>
      <span>&rsaquo;</span>
      <span style="color: var(--text-main); font-weight: 700;">Son Depremler</span>
    </div>

    <div class="deprem-title-row">
      <h1>Son Depremler</h1>

      <button class="btn-refresh-deprem" id="btnRefreshData" title="Verileri Şimdi Yenile">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
        <span>Yenile</span>
      </button>
    </div>
  </div>

  <!-- 2. 4'lü İstatistik Kartları -->
  <div class="deprem-stats-grid">
    <div class="deprem-stat-card">
      <span class="deprem-stat-label">Son Deprem</span>
      <div class="deprem-stat-main">
        <span class="deprem-stat-time" id="statLastTime">Yükleniyor...</span>
        <span class="deprem-stat-location" id="statLastLoc">Lütfen bekleyin</span>
        <span class="deprem-stat-badge pill" id="statLastMag">ML -.-</span>
      </div>
    </div>

    <div class="deprem-stat-card">
      <span class="deprem-stat-label">Listelenen Deprem</span>
      <div class="deprem-stat-main">
        <span class="deprem-stat-number" id="statTotalCount">0</span>
        <span class="deprem-stat-location">Anlık son sarsıntılar</span>
      </div>
    </div>

    <div class="deprem-stat-card">
      <span class="deprem-stat-label">Son 24 Saat (3.0+)</span>
      <div class="deprem-stat-main">
        <span class="deprem-stat-number" id="stat24hCount" style="color: #ea580c;">0</span>
        <span class="deprem-stat-location">Hissedilebilir sarsıntı</span>
      </div>
    </div>

    <div class="deprem-stat-card">
      <span class="deprem-stat-label">En Yüksek ML (Liste)</span>
      <div class="deprem-stat-main">
        <span class="deprem-stat-number" id="statMaxMag" style="color: #dc2626;">-.-</span>
        <span class="deprem-stat-location" id="statMaxLoc">En büyük sarsıntı</span>
      </div>
    </div>
  </div>

  <div class="deprem-datasource-notice">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
    <span>Veri kaynağı: KOERI (Boğaziçi Üniversitesi Kandilli Rasathanesi ve DAE). Liste anlık yenilenir.</span>
  </div>

  <!-- 3. Son Depremler Haritası -->
  <div class="deprem-map-section">
    <div class="section-bar-title">
      <span class="bar-indicator"></span>
      <span>Son depremler haritası</span>
    </div>

    <div class="deprem-map-wrapper">
      <div id="earthquakeMap"></div>
      <div class="map-helper-footer">
        📌 İşaretçilere tıklayarak depremin tam saati, derinliği ve büyüklük ayrıntılarını görebilirsiniz.
      </div>
    </div>
  </div>

  <!-- 4. Büyüklük (ML) Lejant -->
  <div class="deprem-legend-card">
    <h3 class="deprem-legend-title">Büyüklük (ML) Hakkında</h3>
    <p class="deprem-legend-desc">
      Yerel büyüklük (ML) depremin sismograf kayıtlarına göre tahmini şiddetini ifade eder. Renkler yalnızca hızlı okuma içindir.
    </p>

    <div class="deprem-legend-pills">
      <div class="legend-pill-item">
        <span class="legend-color-box" style="background: #dc2626;"></span>
        <span>5.0 ve üzeri — Yüksek</span>
      </div>
      <div class="legend-pill-item">
        <span class="legend-color-box" style="background: #ea580c;"></span>
        <span>3.5 - 4.9 — Orta</span>
      </div>
      <div class="legend-pill-item">
        <span class="legend-color-box" style="background: #0284c7;"></span>
        <span>2.0 - 3.4 — Düşük</span>
      </div>
      <div class="legend-pill-item">
        <span class="legend-color-box" style="background: #64748b;"></span>
        <span>2.0 altı — Çok düşük</span>
      </div>
    </div>
  </div>

  <!-- 5. Deprem Listesi & Filtreler -->
  <div class="deprem-list-card">
    <div class="section-bar-title" style="margin-bottom: 0;">
      <span class="bar-indicator"></span>
      <span>Deprem Listesi</span>
    </div>

    <div class="deprem-tabs-bar">
      <button class="deprem-tab-btn active" id="tabListBtn">Liste</button>
      <button class="deprem-tab-btn" id="tabStatsBtn">İstatistikler</button>
    </div>

    <div class="deprem-filter-bar" id="filterBarContainer" style="display: flex; flex-direction: column; align-items: stretch; gap: 8px;">
      <input 
        type="text" 
        class="filter-search-input" 
        id="depremSearchInput" 
        placeholder="Konum veya tarih ara (örn: Hatay, İzmir, Balıkesir)..."
        style="width: 100%;"
      >

      <div style="display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;">
        <div style="display: flex; align-items: center; gap: 8px;">
          <span style="font-size: 12px; font-weight: 700; color: var(--text-muted);">Büyüklük:</span>
          <select class="filter-select" id="filterMagnitudeSelect">
            <option value="all">Tümü (Tüm Büyüklükler)</option>
            <option value="2.0">2.0 ve üzeri</option>
            <option value="3.0">3.0 ve üzeri</option>
            <option value="4.0">4.0 ve üzeri</option>
            <option value="5.0">5.0 ve üzeri</option>
          </select>
        </div>

        <div style="display: flex; align-items: center; gap: 8px;">
          <span style="font-size: 12px; font-weight: 700; color: var(--text-muted);">Sıralama:</span>
          <select class="filter-select" id="filterSortSelect">
            <option value="date-desc">Tarih (yeni önce)</option>
            <option value="date-asc">Tarih (eski önce)</option>
            <option value="mag-desc">Büyüklük (azalan)</option>
            <option value="mag-asc">Büyüklük (artan)</option>
            <option value="depth-asc">Derinlik (sığ önce)</option>
          </select>
        </div>
      </div>
    </div>

    <div class="deprem-table-wrap" id="tableContainer">
      <table class="deprem-table">
        <thead>
          <tr>
            <th>TARİH</th>
            <th>YER</th>
            <th>TİP</th>
            <th>BÜYÜKLÜK</th>
            <th>DERİNLİK</th>
            <th style="text-align: right;">HARİTA</th>
          </tr>
        </thead>
        <tbody id="depremTableBody">
          <tr>
            <td colspan="6" style="text-align: center; padding: 30px; color: var(--text-muted);">
              Canlı deprem verileri yükleniyor...
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div id="statsContainer" style="display: none; padding: 10px 0;">
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;" id="statsDistributionGrid"></div>
    </div>
  </div>

  <!-- 6. Acil Durum & Yardım Bölümü -->
  <div class="emergency-info-grid">
    <div class="emergency-box-card">
      <div class="section-bar-title">
        <span class="bar-indicator"></span>
        <span>Önemli Telefonlar</span>
      </div>

      <input 
        type="text" 
        class="filter-search-input" 
        id="emergencyPhoneSearch" 
        placeholder="Telefon veya kurum ara..."
      >

      <div class="emergency-list-wrap" id="emergencyPhoneList"></div>
    </div>

    <div class="emergency-box-card">
      <div class="section-bar-title">
        <span class="bar-indicator"></span>
        <span>Önemli Web Siteleri</span>
      </div>

      <div class="emergency-list-wrap" id="emergencyWebList"></div>
    </div>
  </div>

</div>

<?php
$extra_js = [
    'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js',
    'deprem.js?v=2.4'
];
require_once __DIR__ . '/alt.php';
?>
