<section class="shop-single">
    <div class="container">
        <div style="margin-bottom:20px;">
        <a href="<?= base_url() ?>">Home</a> > <a href="<?= base_url('products') ?>">Products</a> > <a href="<?= base_url('products/category/' . $category['alias']) ?>"><?= ucwords($category['category']) ?></a></div> 
        <div class="row"> 
            <div class="col-lg-6 mb-4 mb-lg-0 text-center">
                <div class="product-slide">
                    <div class="single-product owl-carousel owl-theme">
                        <?php for ($i=0; $i < 5; $i++) : ?> 
                          <?php if($i == 0) : ?>
                            <div class="item" data-hash="<?= $i ?>">
                            <?php
                                $remoteFile = 'https://media.serbaantik.com/query/antico/images/' . $product['image' . ($i + 1)];
                            ?>
                            <img src="<?= $remoteFile ?>" alt="<?= ucwords($product['title']) ?>">
                            <a href="<?= $remoteFile ?>" class="link-image-action"><i class="ot-flaticon-search"></i></a>
                            </div>  
                          <?php else : ?>
                            <?php
                                $remoteFile = 'https://media.serbaantik.com/query/antico/images/' . $product['image' . ($i + 1)];
                            ?>
                            <div class="item" data-hash="<?= $i ?>">
                                <img src="<?= $remoteFile ?>"
                                alt="<?= ucwords($product['title']) ?>">
                                <a href="<?= $remoteFile ?>" class="link-image-action"><i class="ot-flaticon-search"></i></a>
                            </div> 
                          <?php endif; ?> 
                        <?php endfor ?>
                    </div>
                    <div class="nav-img">
                        <?php for ($i=0; $i < 5; $i++) : ?> 
                            <?php
                                $remoteFile = 'https://media.serbaantik.com/query/antico/images/' . $product['image' . ($i + 1)];
                            ?>
                            <div class="item">
                                <div>
                                    <a class="" href="#<?= $i ?>">
                                    <img src="<?= $remoteFile ?>" alt=""></a>  
                                </div>
                            </div>
                        <?php endfor ?>  
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                 <div class="summary entry-summary">  
                    <h2 class="single-product-title"><?= ucwords($product['title']) ?></h2>  
                    <br>
                    <div class="product_meta" style="display: grid; grid-template-columns: 1fr 1fr">
                        <span class="sku_wrapper">SKU: <span class="sku"><?= $product['sku'] ?></span></span>
                        <span class="sku_wrapper">Category: <span class="sku"><?= ucwords($category['category']) ?></span></span>
                        <?php if(!is_null($product['price']) && $product['price'] > 0) : ?>
                            <span class="sku_wrapper">Price: <span class="sku">Rp <?= number_format($product['price'],0,",",".") ?></span></span>
                        <?php endif ?> 
                        <?php foreach($varians_attributes as $item) : ?>
                            <span class="sku_wrapper"><?= $item['varian_name'] ?>: <span class="sku"><?= $item['attribute_name'] ?></span></span>
                        <?php endforeach ?>  
                    </div>

                    <?php if(!is_null($product['martindale']) && !empty($product['martindale'])) : ?>
                        <div style="font-size: 18px;
                        font-weight: 500;
                        font-family: 'Titillium Web', sans-serif;
                        letter-spacing: 0.5px;
                        margin-bottom: 15px;
                        color: #1a1a1a;
                        margin-top:20px;
                        ">MARTINDALE: </div>
                        <div><?= ucfirst($product['martindale']) ?></div>
                    <?php endif ?>  

                    <?php if(!is_null($product['frtest']) && !empty($product['frtest'])) : ?>
                        <div style="font-size: 18px;
                        font-weight: 500;
                        font-family: 'Titillium Web', sans-serif;
                        letter-spacing: 0.5px;
                        margin-bottom: 15px;
                        color: #1a1a1a;
                        margin-top:20px;
                        ">FR TEST: </div>
                        <div><?= ucfirst($product['frtest']) ?></div>
                    <?php endif ?>  

                    <?php if(!is_null($product['description']) && !empty($product['description'])) : ?>
                        <div style="font-size: 18px;
                        font-weight: 500;
                        font-family: 'Titillium Web', sans-serif;
                        letter-spacing: 0.5px;
                        margin-bottom: 15px;
                        color: #1a1a1a;
                        margin-top:20px; 
                        ">DESCRIPTION: </div>
                        <div><?= ucfirst($product['description']) ?></div>
                    <?php endif ?>  

                    <?php if($category['can_request_sample'] == 'yes') : ?>
                        <span id="cartMessage" style="display:none; background: green; color:white; padding:5px 10px; border-radius:2px; font-size:16px; margin-bottom:20px;"></span>
                        <br> 
                        <button id="addToCart" name="add-to-cart" class="octf-btn single_add_to_cart_button button alt" style="cursor:pointer">Request Sample</button>
                        <br><br>
                    <?php endif ?>    
                  
                    <?php if(!is_null($product['washing_instruction']) && !empty($product['washing_instruction'])) : ?>
                        <?php if(file_exists(FCPATH . 'uploads/product/' . $product['washing_instruction'] . '.jpg')) :?>
                            <br>
                            <img id="washing_instruction"
                            src="<?= base_url() . 'uploads/product/' . $product['washing_instruction'] . '.jpg' ?>" alt="washing instruction" /> 
                        <?php endif; ?>  
                    <?php endif ?> 
                </div>
            </div>
        </div>
        <div class="space-70"></div>
        <!-- <?php if(!empty($product['image6'])) : ?>
        <div class="row">
            <div class="col-md-12">
                <div class="ot-tabs tab-single-product text-center">
                    <ul class="tabs-heading unstyle">
                        <li class="tab-link current" data-tab="tab-1">How To Order</li>
                    </ul>
                    <div id="tab-1" class="tab-content current">
                        <p><img src="<?= base_url() . 'uploads/product/' . $product['image6'] ?>" /></p>
                    </div>
                </div>
            </div>
        </div>
        <?php endif ?> -->
        <div class="row">
            <div class="col-md-12 text-center mb-2">
                <h2 class="relate-product-title">Related Products</h2>
            </div>
            <?php foreach($related_products as $item) : ?>
              <div class="col-lg-3 co-md-6 col-sm-6 first col-6">
                  <div class="product-item">
                      <div class="product-media">
                          <a href="<?= base_url() . 'products/detail/' . $item['alias'] ?>"> 
                            <img 
                                <?php
                                    $remoteFile = 'https://media.serbaantik.com/query/antico/images/' . $item['image1'];
                                ?> src="<?= $remoteFile ?>" alt="<?= ucwords($product['title']) ?>">
                          </a>
                          <div class="wrapper-add-to-cart">
                              <div class="add-to-cart-inner">
                                  <a href="<?= base_url() . 'products/detail/' . $item['alias'] ?>" class="octf-btn octf-btn-dark">View Product</a>           
                              </div>
                          </div> 
                      </div>
                      <h2 class="woocommerce-loop-product__title"><a href="<?= base_url() . 'products/detail/' . $item['alias'] ?>"><?= ucwords($item['title']) ?></a></h2>
                  </div>
              </div>
            <?php endforeach ?>
        </div>
    </div>
</section>
<script>
//add to cart
$('#addToCart').on('click', function() {  
    ajaxAddToCart();
});

function ajaxAddToCart() {
    $.ajax({
        'url': '<?= base_url('cart/ajax_addtocart'); ?>',
        'type': 'POST',
        'data': {
        '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
        'product_id': '<?= $product['id_products'] ?>',
        },
        'success': function(data) {
            $('#cartMessage').text(data.message); 
            $('#cartMessage').css('display', 'inline-block');
            $('#cartCount').text(data.count);
            $('#cartCount2').text(data.count);
            $("html, body").animate({ scrollTop: 0 }, "fast"); 
        }
    });
}
</script>