<!--Products images-->
<section class="u-align-center u-clearfix u-section-1" id="sec-edab">
  <div class="u-clearfix u-sheet u-valign-middle-sm u-sheet-1">
    <div class="u-container-style u-expanded-width u-product u-product-1">
      <div class="u-container-layout u-valign-bottom u-container-layout-1">
        <div class="u-carousel u-expanded-width-md u-expanded-width-sm u-expanded-width-xs u-gallery u-layout-thumbnails u-lightbox u-no-transition u-product-control u-show-text-none u-thumbnails-position-left u-gallery-1" data-interval="5000" data-u-ride="carousel" id="carousel-365c">
          <div class="u-carousel-inner u-gallery-inner" role="listbox">
            <?php for ($i=1; $i <= 5; $i++) : ?>
              <?php if(isset($product["image{$i}"])) : ?>
                <div class="
                <?php if($i == 1) : ?>
                active u-active 
                <?php endif; ?>
                u-carousel-item u-gallery-item">
                  <div class="u-back-slide" data-image-width="990" data-image-height="1000">
                    <img class="u-back-image u-expanded" src="<?= base_url() . 'uploads/product/' . $product["image{$i}"]; ?>">
                  </div>
                </div>
              <?php endif; ?>  
            <?php endfor; ?>
          </div>
          <a class="u-absolute-vcenter u-carousel-control u-carousel-control-prev u-icon-rectangle u-opacity u-opacity-70 u-text-custom-color-2 u-text-hover-grey-80 u-carousel-control-1" href="#carousel-365c" role="button" data-u-slide="prev">
            <span aria-hidden="true">
              <svg viewBox="0 0 451.847 451.847"><path d="M97.141,225.92c0-8.095,3.091-16.192,9.259-22.366L300.689,9.27c12.359-12.359,32.397-12.359,44.751,0
              c12.354,12.354,12.354,32.388,0,44.748L173.525,225.92l171.903,171.909c12.354,12.354,12.354,32.391,0,44.744
              c-12.354,12.365-32.386,12.365-44.745,0l-194.29-194.281C100.226,242.115,97.141,234.018,97.141,225.92z"></path></svg>
            </span>
            <span class="sr-only">
              <svg viewBox="0 0 451.847 451.847"><path d="M97.141,225.92c0-8.095,3.091-16.192,9.259-22.366L300.689,9.27c12.359-12.359,32.397-12.359,44.751,0
              c12.354,12.354,12.354,32.388,0,44.748L173.525,225.92l171.903,171.909c12.354,12.354,12.354,32.391,0,44.744
              c-12.354,12.365-32.386,12.365-44.745,0l-194.29-194.281C100.226,242.115,97.141,234.018,97.141,225.92z"></path></svg>
                          </span>
          </a>
          <a class="u-absolute-vcenter u-carousel-control u-carousel-control-next u-icon-rectangle u-opacity u-opacity-70 u-text-custom-color-2 u-text-hover-grey-80 u-carousel-control-2" href="#carousel-365c" role="button" data-u-slide="next">
            <span aria-hidden="true">
              <svg viewBox="0 0 451.846 451.847"><path d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744
              L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284
              c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z"></path></svg>
            </span>
            <span class="sr-only">
              <svg viewBox="0 0 451.846 451.847"><path d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744
              L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284
              c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z"></path></svg>
            </span>
          </a>
          <ol class="u-carousel-thumbnails u-hidden-sm u-hidden-xs u-spacing-15 u-vertical-spacing u-carousel-thumbnails-1">
            <?php for ($i=1; $i <=5; $i++) : ?> 
              <?php if(isset($product["image{$i}"])) : ?>
                <li class="
                <?php if($i == 1) : ?>
                u-active 
                <?php endif; ?>
                u-carousel-thumbnail u-carousel-thumbnail-<?= $i; ?>" data-u-target="#carousel-365c" data-u-slide-to="<?= $i - 1; ?>">
                  <img class="u-carousel-thumbnail-image u-image" src="<?= base_url() . 'uploads/product/thumbnail/' . $product["image{$i}"]; ?>">
                </li>
              <?php endif; ?>  
            <?php endfor; ?>
          </ol>
        </div>
        <div class="u-align-center-sm u-align-center-xs u-align-left-lg u-align-left-md u-align-left-xl u-container-style u-expanded-width-md u-expanded-width-sm u-expanded-width-xs u-group u-shape-rectangle u-group-1">
          <div class="u-container-layout u-container-layout-2">
            <h2 class="u-product-control u-text u-text-1">
              <a class="u-product-title-link" href="#"><?= ucwords($product['title']); ?></a>
            </h2>
            <div class="u-product-control u-product-price u-product-price-1">
              <div class="u-price-wrapper u-spacing-10">
                <?php if((int) $product['discounted_price'] > 0 && $product['is_sale'] === 'yes') : ?>
                  <div class="u-old-price" style="text-decoration: line-through !important;">Rp <?= number_format($product['sale_price'], 0,",","."); ?></div>
                  <div class="u-price u-text-custom-color-1" style="font-size: 1.5625rem; font-weight: 700;">Rp <?= number_format($product['discounted_price'], 0,",","."); ?></div> 
                <?php else : ?>
                  <div class="u-price u-text-custom-color-1" style="font-size: 1.5625rem; font-weight: 700;">Rp <?= number_format($product['sale_price'], 0,",","."); ?></div> 
                <?php endif; ?>  
              </div> 
            </div>
            <div class="u-product-control u-product-desc u-text u-text-2">
              <?= ucfirst($product['description']); ?>
            </div>
            <div class="u-product-control u-product-variations u-product-variations-1">
              <div class="u-product-variant">
                <label for="product-variant-select-1" class="u-label">Kirim Dari</label>
                <div class="u-form-select-wrapper">
                  <select id="product-variant-select-1" class="u-border-1 u-border-grey-30 u-input u-input-rectangle u-radius-5 u-white">
                  <option value="Item 1">Pilih Kota</option>
                  <option value="Item 1">Jakarta</option>
                  <option value="Item 1">Semarang</option>
                  <option value="Item 1">Solo</option>
                  <option value="Item 1">Yogyakarta</option>
                  <option value="Item 1">Surabaya</option>
                  <option value="Item 1">Denpasar</option>
                  <option value="Item 1">Lombok</option>
                  <option value="Item 1">Banjarmasin</option>
                  <option value="Item 1">Balikpapan</option>
                  <option value="Item 1">Makassar</option>
                  <option value="Item 1">Ambon</option>
                  </select>
                  <svg class="u-caret u-caret-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" style="fill:currentColor;" xml:space="preserve"><polygon class="st0" points="8,12 2,4 14,4 "></polygon></svg>
                </div>
              </div>
            </div>
            <a href="" class="u-btn u-btn-round u-button-style u-hover-palette-1-dark-1 u-palette-1-base u-product-control u-radius-5 u-btn-1">Add to Cart</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!--Similar products-->
<section class="u-align-center u-clearfix u-section-2" id="sec-41ab">
  <div class="u-clearfix u-sheet u-sheet-1">
    <h3 class="u-text u-text-custom-color-2 u-text-1">SIMILAR PRODUCTS</h3>
    <div class="u-expanded-width-lg u-expanded-width-md u-expanded-width-sm u-expanded-width-xl u-pagination-center u-products u-products-1">
      <div class="u-repeater u-repeater-1"> 
        <?php foreach($similar_products as $key => $product) : ?>           
          <div class="u-align-center u-border-2 u-border-custom-color-2 u-container-style u-products-item u-radius-5 u-repeater-item u-shape-round">
            <div class="u-container-layout u-similar-container u-container-layout-<?= $key + 1; ?>">
              <a href="<?= base_url() . 'product/' . strtolower($product->alias); ?>"><img class="u-expanded-width u-image u-image-round u-product-control u-radius-5 u-image-1" src="<?= base_url() . 'uploads/product/small/' . $product->image1; ?>"></a>
              <?php if($product->new_arrival === 'yes') : ?>
                <a href="<?= base_url() . 'product/' . strtolower($product->alias); ?>" class="u-border-none u-btn u-btn-round u-button-style u-custom-color-3 u-product-control u-radius-5 u-text-white u-btn-1">NEW</a>
              <?php endif; ?>
              <h4 class="u-align-center u-product-control u-text u-text-2">
                <a class="u-product-title-link" href="<?= base_url() . 'product/' . strtolower($product->alias); ?>"><?= ucwords($product->title); ?></a>
              </h4>
              <div class="u-product-control u-product-price u-product-price-1">
                <div class="u-price-wrapper u-spacing-10">
                  <?php if((int) $product->discounted_price > 0 && $product->is_sale === 'yes') : ?>
                    <div class="u-old-price"><s>Rp <?= number_format($product->sale_price, 0,",","."); ?></s></div>
                    <div class="u-price" style="font-size: 1.25rem; font-weight: 700;">Rp <?= number_format($product->discounted_price, 0,",","."); ?></div>
                  <?php else : ?>
                    <div class="u-price" style="font-size: 1.25rem; font-weight: 700;">Rp <?= number_format($product->sale_price, 0,",","."); ?></div>
                  <?php endif; ?>
                </div>
              </div>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
      <div class="u-list-control"></div>
    </div>
  </div>
</section>