<style media="screen">
  .banner-bg{
      padding-top: 4rem;
  }
  .fontstyle{
    font-weight: bold;
  }
</style>
<style media="screen">
.banner-bg .col-xl-12{
  padding-top: 50px;
}

.banner-bg {
    background-image: linear-gradient(90deg, #000000f5 30%, rgba(8, 15, 44, 0)),
                      url(<?php echo $site_url; ?>assets/img/ssl.webp) !important;
    background-size: cover !important;
    background-position: center !important;
}

.text-custom{
  color: black;
}

/* Mobilde arka plan resmini kaldır ve beyaz yap */
@media (max-width: 768px) {
  .step-container{
    display: none !important;
  }
  .banner-bg {
      background-position: 58% !important;
      background-image: linear-gradient(90deg, #000000f5 10%, rgba(8, 15, 44, 0)),
                        url(<?php echo $site_url; ?>assets/img/ssl.webp) !important;
  }
  .banner-bg .col-xl-12{
    padding-top: 0px;
  }

  .text-custom{
      color: white;
  }
}
</style>
<section class="banner-bg bg-dark ssl-banner">
        <div class="container">
            <div class="row align-items-center g-4">
                <div class="col-xl-12">
                    <div class="pb-40">
                        <h1 class="text-white mb-3 sal-animate" data-sal="slide-up" data-sal-duration="500" data-sal-delay="300" data-sal-easing="ease-in-out-sine">SSL Sertifikası</h1>
                        <p class="text-white mb-8 max-text-60 text-opacity-75 sal-animate" data-sal="slide-up" data-sal-duration="500" data-sal-delay="300" data-sal-easing="ease-in-out-sine">
                          Web sitenizin güvenliğini SSL sertifikası ile güçlendirin, kullanıcılarınıza güvenli bir deneyim sunun ve Google arama sonuçlarında üst sıralara çıkın!
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <?php $urunler = $whmcs->ProGet(21); ?>
    <section class="">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <div class="text-center">
                        <h2 class="mb-8">Güvenliğinizi sağlayın, zirveye çıkın!</h2>
                    </div>
                </div>

                <div class="col-10">
                    <div class="d-flex justify-content-center sal-animate" data-sal="slide-up" data-sal-duration="500" data-sal-delay="300" data-sal-easing="ease-in-out-sine">
                        <div class="pricing-nav-pills d-inline-block mx-auto py-2 px-3 border rounded-pill overflow-x-auto">
                            <ul class="nav nav-pills tab-nav-8 flex-nowrap" role="tablist">
                                <?php
                                // Benzersiz description değerlerini elde et
                                $benzersizUrunler = [];
                                foreach ($urunler as $tablist) {
                                  // Eğer description değeri benzersiz listede yoksa ekle
                                  if (!in_array($tablist['description'], array_column($benzersizUrunler, 'description'))) {
                                    $benzersizUrunler[] = $tablist;
                                  }
                                }

                                $ilkEleman = true; // İlk elemanı kontrol etmek için değişken tanımlıyoruz
                                ?>

                                <?php foreach ($benzersizUrunler as $tablist): ?>
                                  <li class="nav-item flex-shrink-0" role="presentation">
                                    <a class="text-black nav-link rounded-pill fs-14 <?php echo $ilkEleman ? 'active' : ''; ?>" href="#" data-bs-toggle="pill" data-bs-target="#<?php echo $tablist['description']; ?>" aria-selected="true" role="tab">
                                      <?php
                                      if ($tablist['description'] == 'comodo-ssl') {
                                        echo "Comodo SSL";
                                      }elseif ($tablist['description'] == 'sectigo-ssl') {
                                        echo "Sectigo SSL";
                                      }elseif ($tablist['description'] == 'digicert-ssl') {
                                        echo "DigiCert SSL";
                                      }elseif ($tablist['description'] == 'sitelock-ssl') {
                                        echo "SiteLock SSL";
                                      }elseif ($tablist['description'] == 'certera-ssl') {
                                        echo "Certera SSL";
                                      }elseif ($tablist['description'] == 'cwatch-ssl') {
                                        echo "cWatch SSL";
                                      }elseif ($tablist['description'] == 'codeguard-ssl') {
                                        echo "CodeGuard SSL";
                                      }
                                       ?>
                                    </a>
                                  </li>
                                  <?php $ilkEleman = false; // İlk eleman kontrolünü kaldırıyoruz ?>
                                <?php endforeach; ?>

                            </ul>
                        </div>
                    </div>
                    <style media="screen">
                    /* Kartların kapsayıcılarına esneklik ve aynı hizada hizalanma sağlar */
                    .row {
                      display: flex;
                      align-items: stretch;
                    }

                    /* Her bir kartın kapsayıcı yüksekliğini tam olarak doldurmasını sağlar */
                    .price-card-8 {
                      display: flex;
                      flex-direction: column;
                      height: 100%;
                    }

                    /* Kart içeriğini dikeyde eşit dağıtmak için */
                    .price-card-8 ul {
                      flex-grow: 1;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                    }

                    </style>
                    <div class="tab-content mt-12 sal-animate" data-sal="fade" data-sal-duration="500" data-sal-delay="300" data-sal-easing="ease-in-out-sine">
                      <?php
                      include 'inc/ssl-spec.php';
                      usort($urunler, function($a, $b) {
                          return $a['pricing']['USD']['annually'] <=> $b['pricing']['USD']['annually'];
                      });
                      foreach ($benzersizUrunler as $index => $uniqueTab) :
                        $currentDescription = $uniqueTab['description'];
                        ?>
                        <div class="tab-pane fade <?php echo $index === 0 ? 'active show' : ''; ?>" id="<?php echo $uniqueTab['description']; ?>" role="tabpanel">
                          <div class="row g-4">
                            <?php
                            foreach ($urunler as $urun) :
                              if ($urun['description'] === $currentDescription):
                                ?>
                                <div class="col-md-6 col-xl-4">
                                  <div class="price-card-8 bg-white px-7 py-9 rounded-4 transition">
                                    <h6 class="fw-bold mb-3"><?php echo $urun['name']; ?></h6>
                                    <h3 class="mb-7"><?php if ($urun['pricing']['USD']['annually'] == "-1.00") { echo "ücretsiz!"; } elseif ($urun['pricing']['USD']['annually'] == "0.00") { echo "ücretsiz!"; } else { echo '$'.$urun['pricing']['USD']['annually']; } ?></h3>
                                    <ul class="list-unstyled d-flex flex-column gap-3 mb-7">
                                      <?php
                                      if (isset($spec[$urun['pid']])):
                                        $aspec = $spec[$urun['pid']];
                                        ?>
                                        <li class="d-flex align-items-center gap-2">
                                          <div class="w-4 h-4 border border-dark-subtle rounded-circle fs-12 d-flex align-items-center justify-content-center">
                                            <i class="las la-check"></i>
                                          </div>
                                          <p class="mb-0">Tip: <?php echo $aspec['tip']; ?></p>
                                        </li>
                                        <li class="d-flex align-items-center gap-2">
                                          <div class="w-4 h-4 border border-dark-subtle rounded-circle fs-12 d-flex align-items-center justify-content-center">
                                            <i class="las la-check"></i>
                                          </div>
                                          <p class="mb-0">Kurulum Süresi: <?php echo $aspec['kurulum-suresi']; ?></p>
                                        </li>
                                        <li class="d-flex align-items-center gap-2">
                                          <div class="w-4 h-4 border border-dark-subtle rounded-circle fs-12 d-flex align-items-center justify-content-center">
                                            <i class="las la-check"></i>
                                          </div>
                                          <p class="mb-0">Subdomain Desteği: <?php echo $aspec['subdomain']; ?></p>
                                        </li>
                                        <li class="d-flex align-items-center gap-2">
                                          <div class="w-4 h-4 border border-dark-subtle rounded-circle fs-12 d-flex align-items-center justify-content-center">
                                            <i class="las la-check"></i>
                                          </div>
                                          <p class="mb-0">Garanti: <?php echo $aspec['garanti']; ?></p>
                                        </li>
                                      <?php
                                      endif;
                                      ?>
                                    </ul>
                                    <a class="col-12 btn btn-primary border-0 gradient-bg-2 btn-arrow btn-arrow-md fs-14 fw-medium rounded" onclick="addToSSL(<?php echo $urun['pid']; ?>)">
                                      <span class="btn-arrow__text">
                                        Sepete Ekle
                                        <span class="btn-arrow__icon">
                                          <i class="las la-arrow-right"></i>
                                        </span>
                                      </span>
                                    </a>
                                  </div>
                                </div>
                                <?php
                              endif;
                            endforeach;
                            ?>
                          </div>
                        </div>
                      <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade show" id="domainModal" tabindex="-1" aria-labelledby="domainModalLabel" style="background-color: rgba(0, 0, 0, 0.5); display: none;" aria-modal="true" role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="padding:25px;background-color: white;">
                <div class="modal-header" style="background-color: white; border-bottom: 0 solid #1c1c1c !important;">
                  <h5 id="domainModalLabel" class="text-center mb-3" style="color:black;">Domain Seçimi</h5>
                    <button style="opacity: 1;" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style="background-color: white;color: black;">
                    <div class="mb-3">
                        <input type="text" class="form-control" id="domainName" placeholder="Domain Adresi" required>
                    </div>
                    <button class="btn btn-primary w-100" onclick="addProductToCart()">Kullan</button>
                </div>
            </div>
        </div>
    </div>

    <div class="pt-120 pb-120 bg-secondary">
        <div class="pb-60">
            <div class="container">
                <div class="row g-4 align-items-center justify-content-xl-between">
                  <div class="container">
                      <div class="row justify-content-center">
                          <div class="col-12">
                              <div class="text-center">
                                  <h2 class="text-dark mb-4 sal-animate" data-sal="slide-up" data-sal-duration="500" data-sal-delay="300" data-sal-easing="ease-in-out-sine">
                                    Hizmetlerimiz ile tanışın!
                                  </h2>
                              </div>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>
        <style media="screen">
            .col-sm-6.col-md-4.feature-list__item.sal-animate:hover {
              background: white;
              border-radius: 25px;
            }
        </style>
        <div class="container">
            <div class="row g-4 g-md-0 feature-list">
                <div class="col-sm-6 col-md-4 feature-list__item sal-animate" data-sal="slide-up" data-sal-duration="500" data-sal-delay="300" data-sal-easing="ease-in-out-sine">
                    <div class="feature-list__card border text-center">
                        <div class="mb-8">
                            <i style="font-size: 75px;" class="fas fa-lock"></i>
                        </div>
                        <h6 class="mb-5">Güvenli İletişim</h6>
                        <p class="mb-0">
                            SSL sertifikalarımız, web sitenizin ziyaretçileriyle olan iletişimini şifreleyerek güvenli hale getirir.
                        </p>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 feature-list__item sal-animate" data-sal="slide-up" data-sal-duration="500" data-sal-delay="300" data-sal-easing="ease-in-out-sine">
                    <div class="feature-list__card border text-center">
                        <div class="mb-8">
                            <i style="font-size: 75px;" class="fas fa-shield-alt"></i>
                        </div>
                        <h6 class="mb-5">Veri Koruma</h6>
                        <p class="mb-0">
                            SSL sertifikalarımız, veri transferlerini koruma altına alarak kullanıcı bilgilerinin güvenliğini sağlar.
                        </p>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 feature-list__item sal-animate" data-sal="slide-up" data-sal-duration="500" data-sal-delay="300" data-sal-easing="ease-in-out-sine">
                    <div class="feature-list__card border text-center">
                        <div class="mb-8">
                            <i style="font-size: 75px;" class="fas fa-globe"></i>
                        </div>
                        <h6 class="mb-5">Arama Motoru Optimizasyonu</h6>
                        <p class="mb-0">
                            SSL, web sitenizin güvenilirliğini artırır ve arama motorlarındaki sıralamanızı iyileştirir.
                        </p>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 feature-list__item sal-animate" data-sal="slide-up" data-sal-duration="500" data-sal-delay="300" data-sal-easing="ease-in-out-sine">
                    <div class="feature-list__card border text-center">
                        <div class="mb-8">
                            <i style="font-size: 75px;" class="fas fa-user-shield"></i>
                        </div>
                        <h6 class="mb-5">Kimlik Doğrulama</h6>
                        <p class="mb-0">
                            SSL sertifikalarımız, kullanıcılarınıza web sitenizin güvenilir ve kimliği doğrulanmış olduğunu garanti eder.
                        </p>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 feature-list__item sal-animate" data-sal="slide-up" data-sal-duration="500" data-sal-delay="300" data-sal-easing="ease-in-out-sine">
                    <div class="feature-list__card border text-center">
                        <div class="mb-8">
                            <i style="font-size: 75px;" class="fas fa-key"></i>
                        </div>
                        <h6 class="mb-5">256 Bit Şifreleme</h6>
                        <p class="mb-0">
                            En yüksek şifreleme standartlarını sunarak web sitenizi ve kullanıcılarınızı koruma altına alıyoruz.
                        </p>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 feature-list__item sal-animate" data-sal="slide-up" data-sal-duration="500" data-sal-delay="300" data-sal-easing="ease-in-out-sine">
                    <div class="feature-list__card border text-center">
                        <div class="mb-8">
                            <i style="font-size: 75px;" class="fas fa-sync"></i>
                        </div>
                        <h6 class="mb-5">Hızlı Kurulum</h6>
                        <p class="mb-0">
                            SSL sertifikalarımız hızlı bir şekilde kurulur ve hemen aktif hale gelir. Web siteniz hemen güvenli olur.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php
    $faq = [
        [
            "question" => "SSL sertifikası nedir ve neden önemlidir?",
            "answer" => "SSL sertifikası, web sitenizin veri iletimini şifreleyerek güvenliği artıran bir teknolojidir. Web sitenizin kullanıcılarına güven vermesi ve arama motorları sıralamalarında avantaj sağlaması için önemlidir."
        ],
        [
            "question" => "Hangi SSL sertifikası türünü seçmeliyim?",
            "answer" => "Seçiminiz web sitenizin ihtiyaçlarına bağlıdır. Kişisel bloglar için Domain Validation (DV), kurumsal web siteler için Organization Validation (OV), e-ticaret veya yüksek güvenlik gerektiren projeler için Extended Validation (EV) önerilir."
        ],
        [
            "question" => "SSL sertifikası tüm tarayıcılarda çalışır mı?",
            "answer" => "Evet, sunduğumuz SSL sertifikaları tüm modern tarayıcılar ile uyumludur. Eski tarayıcılarda sorun yaşamamak için sertifikalarımız dünya çapında tanınan sertifika otoritelerinden temin edilmektedir."
        ],
        [
            "question" => "SSL kurulumu sırasında teknik destek sağlıyor musunuz?",
            "answer" => "Evet, SSL sertifikası kurulumu sırasında ücretsiz teknik destek sunmaktayız. İster kontrol panelinden ister manuel kurulumda destek alabilirsiniz."
        ],
        [
            "question" => "Birden fazla alan adı için SSL sertifikası alabilir miyim?",
            "answer" => "Evet, Multi-Domain SSL (SAN) ve Wildcard SSL sertifikaları ile birden fazla alan adı veya alt alan adı için tek bir sertifika kullanabilirsiniz."
        ],
        [
            "question" => "SSL sertifikası ne kadar sürede aktif hale gelir?",
            "answer" => "Domain Validation (DV) SSL sertifikaları birkaç dakika içinde aktif hale gelirken, Organization Validation (OV) ve Extended Validation (EV) sertifikaları birkaç iş günü sürebilir."
        ],
        [
            "question" => "SSL sertifikamı yenilemem gerekiyor mu?",
            "answer" => "Evet, SSL sertifikaları genellikle bir yıl veya iki yıl geçerlidir. Sertifika süresi dolmadan önce yenileme işlemi yapmanız gerekmektedir."
        ],
        [
            "question" => "SSL sertifikası sitenin hızını etkiler mi?",
            "answer" => "Modern SSL sertifikaları, sitenizin hızını önemli ölçüde etkilemez. Hatta, HTTP/2 protokolü ile SSL kullanan siteler daha hızlı veri iletimine olanak tanır."
        ]
    ];
    ?>

     <div class="pt-60 pb-120">
       <div class="pb-40">
           <div class="container">
               <div class="row justify-content-center">
                   <div class="col-md-10 col-lg-8 col-xl-7">
                       <div class="text-center sal-animate" data-sal="slide-up" data-sal-duration="500" data-sal-delay="300" data-sal-easing="ease-in-out-sine">
                           <h2>
                               Sıkça Sorulan Sorular
                           </h2>
                       </div>
                   </div>
               </div>
           </div>
       </div>
       <div class="container">
           <div class="row g-4 justify-content-center">
               <div class="col-12">
                   <?php $faq_sira = 0; ?>
                   <div class="accordion border-0 vps-hosting-accordion" id="accordionFaq2">
                     <div class="row">
                       <?php foreach ($faq as $key): ?>
                           <?php $faq_sira = $faq_sira + 1; ?>
                         <div class="col-sm-6">
                           <div class="accordion-item border rounded-3 mb-4 sal-animate" data-sal="slide-up" data-sal-duration="500" data-sal-delay="300" data-sal-easing="ease-in-out-sine">
                               <h2 class="accordion-header">
                                   <button class="accordion-button bg-transparent collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-<?php echo $faq_sira; ?>" aria-expanded="false" aria-controls="faq-<?php echo $faq_sira; ?>">
                                       <span class="text-body fs-16 fw-bold"><?php echo $key['question']; ?></span>
                                   </button>
                               </h2>
                               <div id="faq-<?php echo $faq_sira; ?>" class="accordion-collapse collapse" data-bs-parent="#faq-<?php echo $faq_sira; ?>" style="">
                                   <div class="accordion-body pt-0">
                                       <?php echo $key['answer']; ?>
                                   </div>
                               </div>
                           </div>
                         </div>
                       <?php endforeach; ?>
                     </div>
                   </div>
               </div>
           </div>
       </div>
    </div>

    <script type="text/javascript">
    // Modalı açma fonksiyonu
    function addToSSL(productId) {
      const modal = new bootstrap.Modal(document.getElementById('domainModal'), {
          keyboard: true, // ESC ile kapatmayı aktif eder
      });
      modal.show(); // Modal'ı göster
        window.selectedProductId = productId; // Seçilen ürün ID'sini global değişkene atıyoruz
        console.log(productId);
    }

    // Modal içindeki "Kullan" butonuna tıklanınca çalışacak fonksiyon
    function addProductToCart() {
        const domain = document.getElementById('domainName').value;

        if (!domain) {
            alert('Lütfen domain adresini giriniz.');
            return;
        }

        const product = {
            productId: window.selectedProductId, // Ürün ID'sini atıyoruz
            domain: domain,
            action: "ssl", // İşlem türü SSL
            itemName: "SSL Kaydı", // Ürün adı
            type: "ssl" // Ürün türü SSL
        };

        // Sepete ekleme işlemi
        addToCart(product);

        // Sepeti sunucuya gönderme işlemi
        sendCartToServer(product);
    }

    // Sepete ürün ekle
    function addToCart(product) {
        let cart = JSON.parse(localStorage.getItem('cart')) || [];
        cart.push(product); // Ürünü sepete ekliyoruz
        localStorage.setItem('cart', JSON.stringify(cart));
        console.log('Ürün sepete eklendi:', product);
    }

    // Sepeti sunucuya gönderme fonksiyonu
    function sendCartToServer(product) {
        fetch('/require/pages/add-to-cart.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify([product]) // Sepet verisini JSON formatında gönderiyoruz
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.status === 'success') {
                console.log('Sepet sunucuya başarıyla kaydedildi:', data.cart);
                window.location.href = '/sepet'; // İşlem başarılı ise yönlendiriyoruz
            } else {
                console.error('Sepet kaydedilemedi:', data.message);
            }
        })
        .catch(error => {
            console.error('Sunucuya gönderim sırasında bir hata oluştu:', error);
        });
    }
    </script>
