@extends('layouts.default')
@section('content')

<section class="hero-wrap section">
  <div class="hero-mask opacity-9"></div>
  <div class="hero-bg" style="background-image:url('./images/bg/image-2.jpg');"></div>
  <div class="hero-content">
    <div class="container">
      <div class="row align-items-center text-center">
        <div class="col-12">
          <h1 class="text-11 text-white mb-4">{{__('Size nasıl yardımcı olabiliriz?')}}</h1>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Kategori Kutuları -->
<section class="section py-3 my-3 py-sm-5 my-sm-5">
  <div class="container">
    <div class="row g-4">
      <div class="col-sm-6 col-lg-3">
        <div class="category-box bg-white shadow-sm rounded p-4 text-center" data-category="hesabim">
          <span class="d-block text-17 text-primary mt-2 mb-3"><i class="fas fa-user-circle"></i></span>
          <h3 class="text-body text-4">{{__('Hesabım')}}</h3>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="category-box bg-white shadow-sm rounded p-4 text-center" data-category="odeme">
          <span class="d-block text-17 text-primary mt-2 mb-3"><i class="fas fa-money-check-alt"></i></span>
          <h3 class="text-body text-4">{{__('Ödeme')}}</h3>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="category-box bg-white shadow-sm rounded p-4 text-center" data-category="guvenlik">
          <span class="d-block text-17 text-primary mt-2 mb-3"><i class="fas fa-shield-alt"></i></span>
          <h3 class="text-body text-4">{{__('Güvenlik')}}</h3>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="category-box bg-white shadow-sm rounded p-4 text-center" data-category="odeme-yontemleri">
          <span class="d-block text-17 text-primary mt-2 mb-3"><i class="fas fa-credit-card"></i></span>
          <h3 class="text-body text-4">{{__('Ödeme Yöntemleri')}}</h3>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Soruların Gösterileceği Alan -->
<section class="section bg-white" id="questions-section">
  <div class="container">
    <h2 class="text-9 text-center">{{__('Popüler Konular')}}</h2>
    <p class="text-4 text-center mb-5">{{__('En çok sorulan ve merak edilen konular.')}}</p>
    
    <div class="row">
      <div class="col-md-10 mx-auto">
        <div class="accordion accordion-flush" id="questionList">
          <!-- Sorular buraya JavaScript ile eklenecek -->
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Stil Güncellemeleri -->
<style>
  .category-box {
    cursor: pointer; /* Kutucukların tıklanabilir olmasını sağlar */
    transition: background 0.3s ease-in-out;
  }
  .category-box:hover {
    background: #f8f9fa; /* Hover efekt ekler */
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const categories = {
      "hesabim": [
        { question: "Hesabımın şifresini unuttum.", answer: "Şifre sıfırlama işlemi için e-posta adresinizi girin." },
        { question: "Hesabıma banka hesabı nasıl eklerim?", answer: "Hesap ayarlarından banka hesabı ekleyebilirsiniz." },
        { question: "Cüzdanı kullanmak için üyelik gerekli mi?", answer: "Evet, cüzdanınızı kullanabilmek için sitemize üye olmanız gerekmektedir." },
        { question: "Hesabımı devredebilir miyim?", answer: "Hayır, hesaplar kişisel olup başkasına devredilemez." },
        { question: "Hesap hareketlerimi nasıl görebilirim?", answer: "Hesap hareketlerinizi Hesap Geçmişi sekmesinden inceleyebilirsiniz.." },
        { question: "Cüzdanımın bakiyesi sıfırın altına düşebilir mi?", answer: "Hayır, cüzdanınızda negatif bakiye oluşmaz." },
        { question: "Hesap oluşturmak için ne yapmalıyım?", answer: "Sitemize üye olmak için ad, soyad, e-posta ve şifre bilgilerinizi girerek kolayca hesap oluşturabilirsiniz." },
        { question: "Cüzdan bakiyemin süresi var mı?", answer: "Hayır, cüzdan bakiyeniz süresiz olarak hesabınızda kalır. Ancak promosyon bakiyeleri belirli bir süre içinde kullanılmalıdır." },
      ],
      "odeme": [
        { question: "Ödemeleri nasıl alırım?", answer: "Ödemeler otomatik olarak hesabınıza aktarılacaktır." },
        { question: "Ödeme geçmişimi nasıl görebilirim?", answer: "Ödeme geçmişinizi hesap ayarlarından görüntüleyebilirsiniz." }
      ],
      "guvenlik": [
        { question: "Hesabımın güvenliğini nasıl artırırım?", answer: "İki faktörlü kimlik doğrulamayı etkinleştirin." },
        { question: "Şüpheli bir giriş fark ettim, ne yapmalıyım?", answer: "Hemen şifrenizi değiştirin ve destek ekibiyle iletişime geçin." }
      ],
      "odeme-yontemleri": [
        { question: "Kredi kartı ile ödeme yapabilir miyim?", answer: "Evet, kredi kartı ile ödeme yapabilirsiniz." },
        { question: "Havale/EFT ile ödeme yapabilir miyim?", answer: "Evet, banka havalesi ile ödeme yapabilirsiniz." }
      ]
    };

    const categoryBoxes = document.querySelectorAll(".category-box");
    const questionList = document.getElementById("questionList");
    const questionsSection = document.getElementById("questions-section"); // Soruların olduğu alan

    categoryBoxes.forEach(box => {
      box.addEventListener("click", function() {
        const category = this.getAttribute("data-category");
        const questions = categories[category] || [];
        questionList.innerHTML = "";

        questions.forEach((item, index) => {
          const questionItem = `
            <div class="accordion-item">
              <h2 class="accordion-header" id="heading${category}${index}">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse${category}${index}" aria-expanded="false" aria-controls="collapse${category}${index}">
                  ${item.question}
                </button>
              </h2>
              <div id="collapse${category}${index}" class="accordion-collapse collapse" aria-labelledby="heading${category}${index}" data-bs-parent="#questionList">
                <div class="accordion-body">${item.answer}</div>
              </div>
            </div>
          `;
          questionList.innerHTML += questionItem;
        });

        // Soruların olduğu bölüme yumuşak kaydırma efekti ekle
        questionsSection.scrollIntoView({ behavior: "smooth" });
      });
    });
  });
</script>

@endsection