<?php
$attributes = array(
  'id' => 'search_form_desktop1',
  'method' => 'get'
);
?>
<style>
  .suggestbar1 {
    background-color: white;
    /* Set background color to white */
    color: black;
    /* Set text color to black */
    border: 1px solid #ccc;
    /* Optional: Add border for better visibility */
    border-radius: 5px;
    /* Optional: Add border-radius for rounded corners */
  }

  .auto_list {
    list-style-type: none;
    /* Remove list bullets */
    padding: 0;
    /* Remove default padding */
  }

  .auto_list li {
    padding: 10px;
    /* Optional: Add padding to each list item for spacing */
    border-bottom: 1px solid #eee;
    /* Optional: Add border-bottom for a separator effect */
  }

  .auto_list li:last-child {
    border-bottom: none;
    /* Remove border-bottom from the last list item */
  }

  .auto_list a {
    color: black;
    /* Set text color to black */
    text-decoration: none;
    /* Remove underline from links */
  }

  .auto_list a:hover {
    background-color: #eee;
    /* Optional: Add background color on hover for better feedback */
  }
</style>
<!-- Search in home page, but it associated with slider -->
<?= form_open('search', $attributes); ?>
<div class="d-md-none">
  <div class="search-box col-12">
    <div class="search-box-inner">
      <i class="fas fa-search search-icon"></i>
      <input style="min-width: 80%;" id="searchBar1" onkeyup="ajaxSearch_mobile();" autocomplete="off" type="text" name="search_product" class="search-input" placeholder="Search...">
      <input type="hidden" name="brand" class="brand">
      <input type="hidden" name="designer" class="designer">
      <input type="hidden" name="price" class="price">
      <input type="hidden" name="category_title" class="category_title">
      <input type="hidden" name="level1_alias" class="level1_alias">
      <input type="hidden" name="level2_alias" class="level2_alias">
      <input type="hidden" name="level3_alias" class="level3_alias">

    </div>
  </div>
  <div id="suggestions1" class="suggestbar1">
    <div id="autoSuggestionsList1"></div>
  </div>
</div>

<script type="text/javascript">
  jQuery('#suggestions1').hide();

  function ajaxSearch_mobile() {
    var input_data = jQuery('#searchBar1').val();

    if (input_data === '') {
      jQuery('#suggestions1').hide();
    } else {
      var post_data = {
        'search_data': input_data,
        '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>'
      };

      jQuery.ajax({
        type: 'POST',
        url: "<?= base_url() . 'ajax/ajax_get_suggest_product'; ?>",
        data: post_data,
        success: function(data) {
          // return success
          if (data.length > 0) {
            jQuery('#suggestions1').show();
            jQuery('#autoSuggestionsList1').addClass('auto_list');
            jQuery('#autoSuggestionsList1').html(data);

            //move the a list value to input text
            jQuery('#autoSuggestionsList1 a').click(function() {
              jQuery('#suggestions1').hide();
            });
          }
        }
      });
    }
  }
</script>
</form>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <?php $count = 0; ?>
    <?php foreach ($slideshows as $slideshow) : ?>
      <li data-target="#carouselExampleIndicators" data-slide-to="<?= $count; ?>" <?php if ($count == 0) : ?> class="active" <?php endif; ?>></li>
      <?php $count++; ?>
    <?php endforeach; ?>
  </ol>

  <div class="carousel-inner" style="z-index: 98; display: flex; flex-direction: column; align-items: center;">

    <?php $count = 0; ?>
    <?php foreach ($slideshows as $slideshow) : ?>
      <?php $count++; ?>

      <div style="z-index: 98;" class="carousel-item 
        <?php if ($count == 1) : ?>
          active
        <?php endif; ?>
      ">
        <!-- Content for mobile view -->
        <div class="d-md-none">
          <div class="col-12" style="padding: 20px; text-align: center;">
            <a style="z-index: 990;" href="javascript:void(0);" onclick="updateTotalClickSlideshow(<?= $slideshow->id_home_slideshow; ?>, '<?= $slideshow->banner_link; ?>')">
              <img style="padding: 10px;" class="d-block w-100 img-fluid" src="<?= base_url() . 'uploads/banners/' . $slideshow->image; ?>" title="<?= $slideshow->title; ?>" alt="<?= $slideshow->title; ?>">
            </a>
            <br>
            <h2 style="font-size: 28px; color: white;"><?= ucwords($slideshow->title); ?></h2>
            <br>
            <a class="btn" href="javascript:void(0);" onclick="updateTotalClickSlideshow(<?= $slideshow->id_home_slideshow; ?>, '<?= $slideshow->banner_link; ?>')" style="font-size: 24px; border-radius: 5px; background-color: white; color: #333;">
              <?= ucwords($slideshow->title_en); ?>
            </a>
          </div>
        </div>

        <!-- Content for larger screens -->
        <div class="d-none d-md-flex" style="margin-top: 40px;">
          <!-- Content for the left side -->
          <div class="col-6" style="padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
            <h2 style="text-align: center; font-size: 40px; color: white;"><?= ucwords($slideshow->title); ?></h2>
            <br><br>
            <a class="btn" href="javascript:void(0);" onclick="updateTotalClickSlideshow(<?= $slideshow->id_home_slideshow; ?>, '<?= $slideshow->banner_link; ?>')" style="font-size: 24px; border-radius: 5px; background-color: white; color: #333;">
              <?= ucwords($slideshow->title_en); ?>
            </a>
          </div>

          <div class="col-6">
            <a style="z-index: 990;" href="javascript:void(0);" onclick="updateTotalClickSlideshow(<?= $slideshow->id_home_slideshow; ?>, '<?= $slideshow->banner_link; ?>')">
              <img style="padding: 30px;" class="d-block w-100 img-fluid" src="<?= base_url() . 'uploads/banners/' . $slideshow->image; ?>" title="<?= $slideshow->title; ?>" alt="<?= $slideshow->title; ?>">
            </a>
          </div>
        </div>
      </div>
    <?php endforeach; ?>
  </div>
</div>
<script>
  // Fungsi untuk mengirim permintaan AJAX saat gambar diklik
  function updateTotalClickSlideshow(slideshowId, bannerLink) {
    // Buat objek XMLHttpRequest
    var xhr = new XMLHttpRequest();

    // Tentukan URL endpoint untuk mengupdate total_click
    var url = "<?= base_url('slideshow/updateTotalClick/'); ?>" + slideshowId;

    // Kustomisasi request
    xhr.open("GET", url, true);

    // Callback saat permintaan selesai
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // Response dari server (jika diperlukan)
        var response = xhr.responseText;
        console.log(response); // Tampilkan response jika perlu

        // Setelah update total_click selesai, redirect ke banner_link
        window.location.href = bannerLink;
      }
    };

    // Kirim data ke server
    xhr.send();
  }
</script>





<style>
  .search-box {
    display: flex;
    align-items: center;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px;
    max-width: 400px;
    /* Sesuaikan lebar maksimum sesuai kebutuhan */
    width: 100%;
    /* Memastikan search box menggunakan lebar penuh dari kontainernya */
    margin: 0 auto;
    /* Menempatkan search box di tengah container */
  }

  .search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 8px;
    font-size: 14px;
    /* Menyesuaikan ukuran font untuk keterbacaan */
  }

  .search-icon {
    margin-left: 8px;
    color: #555;
    font-size: 16px;
    /* Menyesuaikan ukuran ikon untuk keseimbangan */
  }

  /* Responsif: Menyesuaikan ukuran search box pada layar kecil */
  @media (max-width: 768px) {
    .search-box {
      max-width: 100%;
      padding: 4px;
    }

    .search-input {
      font-size: 12px;
    }

    .search-icon {
      font-size: 14px;
    }
  }

  div.bottom_left_menu {
    z-index: 991;
  }

  #carouselExampleIndicators {
    position: relative;
  }

  @keyframes fade-float-animation {

    0%,
    25%,
    50%,
    75%,
    100% {
      opacity: 0;
      transform: translate(0, 0);
    }

    3%,
    22% {
      opacity: 1;
      transform: translate(100px, -50px);
    }

    28%,
    47% {
      opacity: 1;
      transform: translate(-50px, 50px);
    }

    53%,
    72% {
      opacity: 1;
      transform: translate(100px, 100px);
    }

    78%,
    97% {
      opacity: 1;
      transform: translate(-50px, -50px);
    }
  }



  /* Tambahkan beberapa segitiga dengan ukuran dan warna yang berbeda */
  #carouselExampleIndicators::before {
    content: "\25BC";
    /* Karakter unicode untuk segitiga ke atas */
    position: absolute;
    top: px;
    /* Atur posisi vertikal */
    left: px;
    /* Atur posisi horizontal */
    width: 0;
    height: 0;
    font-size: 50px;
    /* Sesuaikan ukuran font sesuai keinginan */
    color: white;
    /* Ganti warna sesuai keinginan */
    z-index: 97;
    animation: fade-float-animation 10s infinite linear;
  }

  #carouselExampleIndicators::after {
    content: "\25B2";
    /* Karakter unicode untuk segitiga ke bawah */
    position: absolute;
    top: 50px;
    /* Atur posisi vertikal */
    left: 50px;
    /* Atur posisi horizontal */
    width: 0;
    height: 0;
    font-size: 50px;
    /* Sesuaikan ukuran font sesuai keinginan */
    color: red;
    /* Ganti warna sesuai keinginan */
    z-index: 97;
    animation: fade-float-animation 8s infinite linear;
  }



  /* Tambahkan lebih banyak segitiga dengan ukuran dan warna yang berbeda sesuai kebutuhan */
</style>