<?php
require_once __DIR__ . '/api/db.php';
$db = getDB();
$settings = [];
$res = $db->query("SELECT * FROM settings");
while ($r = $res->fetchArray(SQLITE3_ASSOC)) $settings[$r['key']] = $r['value'];
$wa = $settings['whatsapp_number'] ?? '905344250782';

$cars_res = $db->query("SELECT * FROM cars WHERE available=1 ORDER BY daily_price ASC");
$cars = [];
while ($c = $cars_res->fetchArray(SQLITE3_ASSOC)) $cars[] = $c;
$total = count($cars);
?>
<!DOCTYPE html>
<html lang="tr-TR" style="font-size:16px">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kiralık Araçlar | Avis Uygun Araç Kiralama</title>
  <meta name="description" content="2026 model kiralık araçlar. Ekonomiden lükse geniş araç filomuz ile uygun fiyatlı araç kiralama. Online rezervasyon yapın.">
  <link rel="canonical" href="https://avisuygunarac.com/araclar.php">
  <link rel="stylesheet" href="nicepage.css" media="screen">
  <link rel="stylesheet" href="Ana-Sayfa.css" media="screen">
  <script src="jquery.js" defer></script>
  <script src="nicepage.js" defer></script>
  <link rel="icon" href="images/favicon.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Montserrat:400,600,700">
  <style>
    .araclar-hero {
      background: linear-gradient(135deg, #c0392b 0%, #922b21 100%);
      color: #fff; padding: 48px 24px 40px; text-align: center;
    }
    .araclar-hero h1 { font-size: 2.2rem; font-weight: 800; margin: 0 0 10px; }
    .araclar-hero p { font-size: 1rem; opacity: .88; margin: 0; }
    .araclar-hero .badge { display:inline-block; background:rgba(255,255,255,.2); padding:4px 14px; border-radius:20px; font-size:.85rem; margin-top:10px; }
    .filtre-bar {
      background: #fff; border-bottom: 1px solid #eee;
      padding: 14px 24px; display: flex; gap: 10px; flex-wrap: wrap;
      align-items: center; position: sticky; top: 0; z-index: 100;
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }
    .filtre-bar label { font-size: .82rem; font-weight: 600; color: #555; }
    .filtre-bar select, .filtre-bar input {
      padding: 7px 12px; border: 1px solid #ddd; border-radius: 6px;
      font-size: .88rem; background: #fff;
    }
    .filtre-bar select:focus, .filtre-bar input:focus { outline: none; border-color: #c0392b; }
    .araclar-wrap { max-width: 1200px; margin: 0 auto; padding: 32px 20px 60px; }
    .sonuc-bilgi { font-size: .88rem; color: #888; margin-bottom: 18px; }
    .sonuc-bilgi strong { color: #c0392b; }
  </style>
</head>
<body class="u-body">

<header class="u-clearfix u-header u-header" id="sec-454d">
  <div class="u-clearfix u-sheet u-sheet-1">
    <a href="index.php" class="u-image u-logo u-image-1" title="Ana Sayfa">
      <img src="images/Avis_logo.svg.png" class="u-logo-image u-logo-image-1">
    </a>
    <nav class="u-menu u-menu-dropdown u-offcanvas u-menu-1" data-responsive-from="XL">
      <div class="menu-collapse" style="font-size:1rem;font-weight:500;">
        <a class="u-button-style u-nav-link" href="#">
          <svg class="u-svg-link" viewBox="0 0 24 24"><use xlink:href="#menu-hamburger"></use></svg>
          <svg class="u-svg-content" id="menu-hamburger" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <g><rect y="1" width="16" height="2"></rect><rect y="7" width="16" height="2"></rect><rect y="13" width="16" height="2"></rect></g>
          </svg>
        </a>
      </div>
      <div style="background-color:#F0F8FF;" class="u-custom-menu u-nav-container">
        <ul class="u-nav u-spacing-2 u-unstyled u-nav-1">
          <li class="u-nav-item"><a class="u-active-grey-5 u-button-style u-hover-grey-10 u-nav-link u-text-grey-90" href="index.php" style="padding:10px 20px;">Ana Sayfa</a></li>
          <li class="u-nav-item"><a class="u-active-grey-5 u-button-style u-hover-grey-10 u-nav-link u-text-grey-90" href="araclar.php" style="padding:10px 20px;color:#c0392b;font-weight:700;">Kiralık Araçlar</a></li>
          <li class="u-nav-item"><a class="u-active-grey-5 u-button-style u-hover-grey-10 u-nav-link u-text-grey-90" href="havalimani.php" style="padding:10px 20px;">Havalimanları</a></li>
        </ul>
      </div>
      <div style="background-color:#F0F8FF;" class="u-custom-menu u-nav-container-collapse">
        <div class="u-black u-container-style u-inner-container-layout u-opacity u-opacity-95 u-sidenav">
          <div class="u-inner-container-layout u-sidenav-overflow">
            <div class="u-menu-close"></div>
            <ul class="u-align-center u-nav u-popupmenu-items u-unstyled u-nav-2">
              <li class="u-nav-item"><a class="u-button-style u-nav-link" href="index.php">Ana Sayfa</a></li>
              <li class="u-nav-item"><a class="u-button-style u-nav-link" href="araclar.php">Kiralık Araçlar</a></li>
              <li class="u-nav-item"><a class="u-button-style u-nav-link" href="havalimani.php">Havalimanları</a></li>
            </ul>
          </div>
        </div>
        <div class="u-black u-menu-overlay u-opacity u-opacity-70"></div>
      </div>
    </nav>
  </div>
</header>

<div class="araclar-hero">
  <h1>Kiralık Araçlar</h1>
  <p>2026 model araç filomuzdan size uygun olanı seçin</p>
  <div class="badge"><?= $total ?> araç mevcut</div>
</div>

<div class="filtre-bar">
  <label>Vites:</label>
  <select id="f-vites" onchange="filtrele()">
    <option value="">Tümü</option>
    <option value="Otomatik">Otomatik</option>
    <option value="Manuel">Manuel</option>
  </select>
  <label>Yakıt:</label>
  <select id="f-yakit" onchange="filtrele()">
    <option value="">Tümü</option>
    <option value="Benzin">Benzin</option>
    <option value="Dizel">Dizel</option>
    <option value="Hibrit">Hibrit</option>
    <option value="Elektrik">Elektrik</option>
  </select>
  <label>Max Fiyat:</label>
  <select id="f-fiyat" onchange="filtrele()">
    <option value="">Tümü</option>
    <option value="2000">2.000 TL'ye kadar</option>
    <option value="3000">3.000 TL'ye kadar</option>
    <option value="5000">5.000 TL'ye kadar</option>
  </select>
  <label>Ara:</label>
  <input type="text" id="f-ara" placeholder="Araç adı..." oninput="filtrele()">
  <span id="filtre-sonuc" style="font-size:.82rem;color:#888;margin-left:auto"></span>
</div>

<div class="araclar-wrap">
  <div class="arac-grid" id="arac-listesi">
<?php foreach ($cars as $car):
    $seats   = $car['seats']        ?? 5;
    $luggage = $car['luggage']      ?? 2;
    $trans   = $car['transmission'] ?? 'Manuel';
    $fuel    = $car['fuel']         ?? 'Benzin';
    $fuelIcon = $fuel === 'Elektrik' ? '⚡' : ($fuel === 'Hibrit' ? '🔋' : ($fuel === 'Dizel' ? '🛢️' : '⛽'));
    $transIcon = $trans === 'Otomatik' ? '🔄' : '🔧';
?>
    <div class="arac-kart"
         data-vites="<?= htmlspecialchars($trans) ?>"
         data-yakit="<?= htmlspecialchars($fuel) ?>"
         data-fiyat="<?= $car['daily_price'] ?>"
         data-isim="<?= strtolower(htmlspecialchars($car['name'])) ?>">
      <div class="arac-kart-ust">
        <div class="arac-model-yil"><?= $car['model_year'] ?> Model</div>
        <h3 class="arac-isim"><?= htmlspecialchars($car['name']) ?></h3>
        <div class="arac-gorsel-wrap">
          <img src="<?= htmlspecialchars($car['image_url']) ?>"
               onerror="this.src='images/Avis_logo.svg.png'"
               alt="<?= htmlspecialchars($car['name']) ?> kiralama 2026">
        </div>
        <div class="arac-fiyat">
          <span class="fiyat-label">Günlük</span>
          <span class="fiyat-rakam"><?= number_format($car['daily_price'], 0, ',', '.') ?> TL</span>
        </div>
      </div>
      <div class="arac-ozellikler">
        <div class="ozellik-baslik">Araç Özellikleri</div>
        <div class="ozellik-grid">
          <div class="ozellik-item">👥 <?= $seats ?> Yetişkin</div>
          <div class="ozellik-item">🧳 <?= $luggage ?> Büyük Bavul</div>
          <div class="ozellik-item">🛡️ Yolcu Airbag</div>
          <div class="ozellik-item">🔒 ABS</div>
          <div class="ozellik-item"><?= $fuelIcon ?> <?= $fuel ?></div>
          <div class="ozellik-item"><?= $transIcon ?> <?= $trans ?></div>
        </div>
        <div class="kiralama-kosullari">
          <div class="kosul-baslik">Kiralama Koşulları</div>
          <div class="kosul-item">✅ 21 Yaş ve Üstü</div>
          <div class="kosul-item">✅ Ehliyet Yaşı 1 ve Üzeri</div>
          <div class="kosul-item">✅ Kredi Kartı Gerekmez</div>
        </div>
      </div>
      <div class="arac-butonlar">
        <a href="index.php#rezervasyon-<?= $car['id'] ?>"
           onclick="sessionStorage.setItem('rez_car_id','<?= $car['id'] ?>');sessionStorage.setItem('rez_car_name','<?= addslashes($car['name'].' '.$car['model_year']) ?>');sessionStorage.setItem('rez_car_price','<?= $car['daily_price'] ?>');window.location='index.php';"
           class="btn-rezervasyon" style="text-decoration:none;display:block;text-align:center;">
          Rezervasyon Oluştur
        </a>
        <a href="https://wa.me/+<?= htmlspecialchars($wa) ?>?text=<?= urlencode('Merhaba, '.$car['name'].' '.$car['model_year'].' Model için rezervasyon yapmak istiyorum.') ?>"
           target="_blank" class="btn-whatsapp">
          💬 WhatsApp ile Rezervasyon
        </a>
      </div>
    </div>
<?php endforeach; ?>
  </div>
  <div id="bos-sonuc" style="display:none;text-align:center;padding:60px 20px;color:#aaa;">
    <p style="font-size:2rem">🚗</p>
    <p>Filtreye uygun araç bulunamadı.</p>
  </div>
</div>

<?php include __DIR__ . '/inc/wa_widget.php'; ?>

<footer class="u-align-center u-clearfix u-footer u-grey-80 u-footer">
  <div class="u-clearfix u-sheet u-sheet-1">
    <p class="u-small-text u-text u-text-variant u-text-1">Avis Oto Kiralama Hizmetleri - <?= date('Y') ?> Copyright</p>
  </div>
</footer>

<script>
function filtrele() {
  const vites = document.getElementById('f-vites').value;
  const yakit = document.getElementById('f-yakit').value;
  const fiyat = parseInt(document.getElementById('f-fiyat').value) || 0;
  const ara   = document.getElementById('f-ara').value.toLowerCase();
  const kartlar = document.querySelectorAll('.arac-kart');
  let gorunen = 0;
  kartlar.forEach(k => {
    const ok = (!vites || k.dataset.vites === vites)
            && (!yakit || k.dataset.yakit === yakit)
            && (!fiyat || parseInt(k.dataset.fiyat) <= fiyat)
            && (!ara   || k.dataset.isim.includes(ara));
    k.style.display = ok ? '' : 'none';
    if (ok) gorunen++;
  });
  document.getElementById('filtre-sonuc').textContent = gorunen + ' araç gösteriliyor';
  document.getElementById('bos-sonuc').style.display = gorunen === 0 ? 'block' : 'none';
}
</script>
</body>
</html>
