<?php $options = kaveh_get_options(); ?>

<!--start search popup -->
<div id="seeebox" class="seeebox" style="display: none;">
  <div class="backdrop closesee"></div>
  <div class="container position-fixed top-50 start-50 translate-middle">
    <span class="position-absolute top-0 end-0 bg-porp me-3 mt-3 closesee">
      <i class="icon icon-close"></i>
      <?php esc_html_e('Close', 'kavehTheme'); ?>
    </span>
    <i class="isax isax-search-normal position-absolute top-0 start-0 bg-purp"></i>
    <form id="manod" action="<?php echo home_url('/shop'); ?>" method="get" autocomplete="off">
      <input id="keyword" name="s" class="form-control position-absolute fetchinpu" type="text"
        placeholder="<?php esc_attr_e('Search for the product you need', 'kavehTheme'); ?>" aria-label="default input example">
    </form>
    <div class="row seabox shadow-lg bg-white rounded-4 pt-5">
      <div
        class="<?php if ($options['search_kaveh_tasavir'] == '1'): ?>col-lg-7<?php else: ?>col-lg-12<?php endif; ?> p-3 position-relative">
        <div class="swiper-sea-next position-absolute top-0 end-0 bg-white rounded">
          <svg xmlns="http://www.w3.org/2000/svg" width="6.667" height="8" viewBox="0 0 6.667 8">
            <path id="Arrow_-_Left_2" data-name="Arrow - Left 2"
              d="M7.246,9.246c.038-.039.18-.2.312-.34a14.46,14.46,0,0,1,3.864-2.683A3.078,3.078,0,0,1,12.208,6a1.289,1.289,0,0,1,.6.145,1.249,1.249,0,0,1,.53.6,6.566,6.566,0,0,1,.171.709,15.983,15.983,0,0,1,.161,2.537,18.486,18.486,0,0,1-.142,2.459,5.669,5.669,0,0,1-.227.885A1.19,1.19,0,0,1,12.246,14h-.038a3.253,3.253,0,0,1-.881-.273,14.46,14.46,0,0,1-3.779-2.644,3.773,3.773,0,0,1-.321-.369A1.189,1.189,0,0,1,7,10,1.25,1.25,0,0,1,7.246,9.246Z"
              transform="translate(-7 -6)" fill="#200e32" />
          </svg>
        </div>
        <div class="swiper-sea-prev position-absolute top-0 start-0 bg-white rounded">
          <svg xmlns="http://www.w3.org/2000/svg" width="6.667" height="8" viewBox="0 0 6.667 8">
            <path id="Arrow_-_Left_2" data-name="Arrow - Left 2"
              d="M7.246,9.246c.038-.039.18-.2.312-.34a14.46,14.46,0,0,1,3.864-2.683A3.078,3.078,0,0,1,12.208,6a1.289,1.289,0,0,1,.6.145,1.249,1.249,0,0,1,.53.6,6.566,6.566,0,0,1,.171.709,15.983,15.983,0,0,1,.161,2.537,18.486,18.486,0,0,1-.142,2.459,5.669,5.669,0,0,1-.227.885A1.19,1.19,0,0,1,12.246,14h-.038a3.253,3.253,0,0,1-.881-.273,14.46,14.46,0,0,1-3.779-2.644,3.773,3.773,0,0,1-.321-.369A1.189,1.189,0,0,1,7,10,1.25,1.25,0,0,1,7.246,9.246Z"
              transform="translate(-7 -6)" fill="#200e32" />
          </svg>
        </div>
        <div class="swiper swiper-seabox  ms-3 mx-4 overflow-hidden pb-5 pt-2">
          <div class="swiper-wrapper search_result datafetch3" id="datafetch3">

          </div>
        </div>
        <div class="row srows">
          <div class="col-sm-12 col-md-6 col-lg-6 pt-2">
            <p class="ps-2">
              <i class="isax isax-filter-search fs-5 me-1"></i>
              <?php esc_html_e('Products', 'kavehTheme'); ?>
              <svg class="mx-2" xmlns="http://www.w3.org/2000/svg" width="20" height="1" viewBox="0 0 20 1">
                <g id="Rectangle_509" data-name="Rectangle 509" fill="#a9a9a9" stroke="#919191" stroke-width="1">
                  <rect width="20" height="1" stroke="none" />
                  <rect x="0.5" y="0.5" width="19" fill="none" />
                </g>
              </svg>
            </p>
            <div class="search_result datafetch" id="datafetch">
            </div>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-6 pt-2">
            <p class="ps-2">
              <i class="isax isax-category-2 fs-5 me-1"></i>
              <?php esc_html_e('Categories', 'kavehTheme'); ?>
              <svg class="mx-2" xmlns="http://www.w3.org/2000/svg" width="20" height="1" viewBox="0 0 20 1">
                <g id="Rectangle_509" data-name="Rectangle 509" fill="#a9a9a9" stroke="#919191" stroke-width="1">
                  <rect width="20" height="1" stroke="none" />
                  <rect x="0.5" y="0.5" width="19" fill="none" />
                </g>
              </svg>
            </p>
            <div class="search_result datafetch2" id="datafetch2">
            </div>
          </div>
        </div>
      </div>
      <?php if ($options['search_kaveh_tasavir'] === '1'): ?>
        <div class="col-lg-5 p-3 justify-content-between position-relative">
          <div class="swiper swiper-geabox overflow-hidden position-relative">
            <div class="swiper-wrapper">
              <?php
              $mkpicsearchslider = $options['search-pic-repeater'];
              ?>
              <?php
              for ($i = 0; $i < count($mkpicsearchslider); $i++) {
                ?>
                <div class="swiper-slide">
                  <a
                    href="<?php if (isset($mkpicsearchslider[$i]['searc-pic-url']['url'])) {
                      $pic_url = $mkpicsearchslider[$i]['searc-pic-url']['url'];
                      echo 'href="' . esc_url($pic_url) . '"';
                    } ?>"><img
                      class="d-block rounded-4 m-2 w-75" src="<?php echo $mkpicsearchslider[$i]['searc-pic']; ?>"
                      alt="search"></a>
                </div>
                <?php
              }
              ?>
            </div>
            <div class="swiper-pagination"></div>
          </div>
          <img class="d-inline rounded-4 m-2 w-50 nomobile" src="<?php echo $options['aj-search']; ?>" alt="search">
          <img class="d-inline rounded-4 m-2 w-50 nomobile" src="<?php echo $options['aj-search2'] ?>" alt="search">
        </div>
      <?php endif; ?>
    </div>
  </div>
</div>
<!--end search popup -->