<?php
/**
 * Default theme — Product detail page
 *
 * @contract  Store API v1 — page: product
 * @see       Store_cart_payload::page_product()
 * @see       /store/api/v1/pages/product  (requires ?id=PRODUCT_ID)
 *
 * GLOBALS (always available via Storeapp::view)
 *   $store_setting  array   All store settings key-value map
 *   $client         array   Logged-in customer array; empty array if guest
 *   $home_link      string  Absolute URL to store homepage
 *
 * PAGE VARIABLES
 *   $product              array   Product data {id, name, price, old_price, description, product_featured_image, ...}
 *   $all_images           array   All product images [{image}, ...]
 *   $all_videos           array   All product videos [{video_url}, ...]
 *   $review_count         int     Total number of reviews
 *   $review_list          array   Reviews [{id, rating, comment, user_name, created_at}, ...]
 *   $allowReview          bool    Whether the current user can submit a review
 *   $is_wishlisted_class  string  CSS class 'active' if product is in wishlist, '' otherwise
 *   $add_coupon_url       string  URL to apply a coupon code
 *   $order_id             int|null Latest order ID containing this product (for review linking)
 *   $user                 array   Logged-in user data; empty array if guest (alias of $client)
 *   $login_usr            array   Alias of $user / $client
 *   $related_products     array   Related/upsell products
 *   $upsell_products      array   Upsell funnel products (optional)
 *   $store_setting        array   Store settings (alias of global)
 */
?>
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/store/default/slick/') ?>slick.css"/>
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/store/default/slick/') ?>slick-theme.css"/>
<script type="text/javascript" src="<?= base_url('assets/store/default/slick/') ?>slick.js"></script>

<?php 
// Check if the featured image is an external URL or a local file path.
$product_featured_image = '';
if (!empty($product['product_featured_image'])) {
    if (strpos($product['product_featured_image'], 'http://') === 0 || strpos($product['product_featured_image'], 'https://') === 0) {
        // It's an external URL, use it as is.
        $product_featured_image = $product['product_featured_image'];
    } else {
        // It's a local file, prepend the base URL and path.
        $product_featured_image = base_url('assets/images/product/upload/thumb/'. $product['product_featured_image']);
    }
} else {
    // No image is set, use a placeholder.
    $product_featured_image = base_url('assets/store/default/img/pr-img.png');
}

$allimages = $all_images ?? [];
$allvideo  = $all_videos ?? [];
?>

<!-- V14: JSON-LD Product Structured Data for Google Rich Results -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Product",
    "name": <?= json_encode($product['product_name']) ?>,
    "description": <?= json_encode(strip_tags($product['product_short_description'] ?? '')) ?>,
    "image": <?= json_encode($product_featured_image) ?>,
    "sku": <?= json_encode($product['product_id']) ?>,
    "url": <?= json_encode(current_url()) ?>,
    "offers": {
        "@type": "Offer",
        "price": <?= json_encode(number_format((float)($product['product_price'] ?? 0), 2, '.', '')) ?>,
        "priceCurrency": <?= json_encode($store_setting['currency_code'] ?? 'USD') ?>,
        "availability": "<?= ((int)($product['product_quantity'] ?? 0) > 0 || (int)($product['product_quantity'] ?? 0) == -1) ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock' ?>",
        "url": <?= json_encode(current_url()) ?>
    }
    <?php
    if (($review_count ?? 0) > 0):
    ?>,
    "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "<?= $avg_rating ?>",
        "reviewCount": "<?= $review_count ?>"
    }
    <?php endif; ?>
}
</script>
<!-- V14: BreadcrumbList Structured Data -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {"@type": "ListItem", "position": 1, "name": "Home", "item": <?= json_encode(base_url('store')) ?>},
        {"@type": "ListItem", "position": 2, "name": "Products", "item": <?= json_encode(base_url('store/category')) ?>},
        {"@type": "ListItem", "position": 3, "name": <?= json_encode($product['product_name']) ?>}
    ]
}
</script>

<section class="single-product" data-product-id="<?= $product['product_id'] ?>" data-product-image="<?= htmlspecialchars($product_featured_image) ?>">
  <div class="container">
    <div class="breacrumb">
      <div class="inner-pages-breadcrumb">
    <p><a href="<?= $home_link ?>"><?= __('store.home') ?></a> / <a href="<?= $base_url ?>category"><?= __('store.categories') ?></a> / <?php if($categories){ 
          foreach ($categories as $key => $value) {
            $categotyAvailble = true;
              echo "<a href='". base_url('store/category/'. $value['slug']) ."'>".$value['name']."</a> /";
            }
          } ?> <?= (!empty($product['product_name'])) ? $product['product_name'] : "Lorem Ipsum"; ?></p>
    </div>
  </div>

  <div style="clear:both;"></div>
	  
  <div class="single-product-row">
    <div class="produc-gallery">
      <div id="productSlider" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
          <div class="carousel-indicators">
           <div class="prev-btn">
             <i class="fa fa-angle-up"></i>
           </div>
           <div class="next-btn">
             <i class="fa fa-angle-down"></i>
           </div>
          <div class="slider">
            <div data-bs-target="#productSlider" data-bs-slide-to="0" class="active">
              <img src="<?= $product_featured_image; ?>" class="" alt="<?= __('store.featured_image') ?>" onerror="this.src='<?= base_url('assets/store/default/img/no-image.png')?>';">
            </div>
            
            <?php 
            $i = 1;
            foreach($allimages as $images) { 
              if (preg_match("/^(http:\/\/|https:\/\/|s3:\/\/).*/", $images['product_media_upload_path'])) {

                  $img = $images['product_media_upload_path'];
              } else {
                $img = (!empty($images['product_media_upload_path'])) ? base_url('assets/images/product/upload/thumb/'.$images['product_media_upload_path']) : base_url('assets/store/default/img/pr-img.png');
              }
            
            ?>
            <div data-bs-target="#productSlider" data-bs-slide-to="<?= $i ?>">
                <img src="<?=  $img; ?>" class="" alt="<?= __('store.product_image') ?> <?= $i ?>" onerror="this.src='<?= base_url('assets/store/default/img/no-image.png')?>';">
            </div>
            <?php 
            $i++;
            } 
            ?>
            <?php foreach($allvideo as $videos) { 
                $img = (!empty($videos['product_media_upload_video_image'])) ? base_url('assets/images/product/upload/thumb/' .$videos['product_media_upload_video_image']) : base_url('assets/store/default/img/pr-img.png');
                ?>
                <div data-bs-target="#productSlider" data-bs-slide-to="<?= $i ?>">
                <img src="<?=  $img; ?>" class="" alt="<?= __('store.product_video_image') ?> <?= $i ?>" onerror="this.src='<?= base_url('assets/store/default/img/no-image.png')?>';">
                </div>
            <?php 
            $i++;
            } 
            ?>
          </div>
          </div>

<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="<?= strpos($product_featured_image, 'http://') === 0 || strpos($product_featured_image, 'https://') === 0 ? $product_featured_image : base_url('assets/images/product/upload/thumb/' . $product_featured_image); ?>" class="d-block w-100" alt="<?= __('store.featured_image') ?>" onerror="this.src='<?= base_url('assets/store/default/img/no-image.png')?>';">
    </div>
    <?php 
    $i = 1;
    foreach($allimages as $images) { 
        $imgPath = $images['product_media_upload_path'];
        $img = strpos($imgPath, 'http://') === 0 || strpos($imgPath, 'https://') === 0 ? $imgPath : base_url('assets/images/product/upload/thumb/'.$imgPath);
    ?>
    <div class="carousel-item">
        <img src="<?= $img; ?>" class="d-block w-100" alt="<?= __('store.product_image') ?> <?= $i ?>" onerror="this.src='<?= base_url('assets/store/default/img/no-image.png')?>';">
    </div>
    <?php $i++; } ?>

    <?php
    foreach($allvideo as $videos) { 
        $videoImgPath = $videos['product_media_upload_video_image'];
        $img = strpos($videoImgPath, 'http://') === 0 || strpos($videoImgPath, 'https://') === 0 ? $videoImgPath : base_url('assets/images/product/upload/thumb/'.$videoImgPath);
        $youtube = $videos['product_media_upload_path'];
        
        $embedUrl = convertToEmbedUrl($youtube);
    ?>
    <div class="carousel-item">
        <iframe width='100%' height='530' src='<?= $embedUrl ?>' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
    </div>
    <?php $i++; } ?>

    <button class="carousel-control-prev" type="button" data-bs-target="#productSlider" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden"><?= __('store.previous') ?></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#productSlider" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden"><?= __('store.next') ?></span>
    </button>
</div>




			</div>
        </div>
		 
		 <div class="product-content-detail">
		     <div class="pr-title">
			    <h1><?= (!empty($product['product_name'])) ? $product['product_name'] : "What is Lorem Ipsum?"; ?></h1>
				<div class="compair-icons">
        <!-- w-listed -->
				  <span id="btn-add-to-wishlist" class="<?= $is_wishlisted_class ?>"><i class="fa fa-heart" aria-hidden="true"></i></span>
            <?php $actual_link = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ?>
				  <span data-social-share data-share-url="<?= $actual_link;?>"><img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/'); ?>img/refresh.png"></span>
				</div>
			 </div>
			 <div class="review-row">
         <?php
          $ratingAvg = 0;
          $totalRating = 0;
          $numberOfRatings = 0;
          if(!empty($ratings)) { 
            foreach($ratings as $rating) { 
              $totalRating += (int)$rating['rating_number'];
              $numberOfRatings++;
            }
          }
          
          if($totalRating > 0 && $numberOfRatings > 0) {
            $ratingAvg = number_format(($totalRating / $numberOfRatings), 0);
          }
         ?>

<div class="rating-stars">
    <?php
    // Loop for filled stars
    for ($i = 0; $i < $ratingAvg; $i++) {
        echo '<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="60 -62 309 309" style="width:17px; height:17px; stroke-width:4px; fill: #FFD700; stroke: black;"><polygon points="281.1,129.8 364,55.7 255.5,46.8 214,-59 172.5,46.8 64,55.4 146.8,129.7 121.1,241 212.9,181.1 213.9,181 306.5,241"></polygon></svg>';
    }
    // Loop for empty stars
    for ($i = $ratingAvg; $i < 5; $i++) {
        echo '<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="60 -62 309 309" style="width:17px; height:17px; stroke-width:4px; fill: lightgray; stroke: black;"><polygon points="281.1,129.8 364,55.7 255.5,46.8 214,-59 172.5,46.8 64,55.4 146.8,129.7 121.1,241 212.9,181.1 213.9,181 306.5,241"></polygon></svg>';
    }
    ?>
</div>

			  <span class="spacer">|</span>
        <span><?= $numberOfRatings ?> <?= __('store.customer_reviews') ?></span>              
			  <span class="spacer">|</span>
			  <span class="sku"><?= __('store.sku') ?> : <?= (!empty($product['product_sku'])) ? $product['product_sku'] : "ED1420";?></span>

        <span class="spacer">|</span> 
       <span> <i class="fas fa-user"></i> <a href="<?= base_url('store/productionstore/'.base64_encode($product['product_created_by']));?>" > <?=$product['product_created_by_name'];?> </a></span>

 
			  <span class="spacer">|</span>
        <span><?= __('store.promoted_by') ?> : 
          <?php if(!empty($user['store_slug']) && !empty($user['username'])) { ?>
            <a href="<?= base_url('store/'.$user['store_slug']); ?>"><?= $user['username']; ?></a>
          <?php } else { ?>
            <?= (!empty($user['username'])) ? $user['username'] : __('store.admin');?>
          <?php } ?>
        </span>
			  <span class="spacer">|</span>
        <span><?= __('store.category') ?> : <?php 
          if($categories){ 
          foreach ($categories as $key => $value) {
              $categotyAvailble = true;
              echo "<a id='product-category' data-product_id='".$product['product_id']."' data-category_id='".$value['id']."' href='". base_url('store/category/'. $value['slug']) ."'><span style='border-color:#fff;'>". $value['name'] ."</span></a>";
          }
          }

          if(!isset($categotyAvailble)) {
            echo __('store.not_available');
          }
          ?>
			 </div></span>
			 
			 <p class="product-text"><?= !(empty($product['product_short_description'])) ? $product['product_short_description'] : __('store.product_short_description_if_not_exist');?> </p>
			 
       <?php
        $variations = [];
        if(isset($product['product_variations']) && !empty($product['product_variations'])) {
          $variations = json_decode($product['product_variations']);
        }
        ?>

        <?php
          foreach ($variations as $key => $value) {
            
            ?>
              <div class="variation-row my-1 <?= ($key != "colors") ? "ft-variation-row" : "ft-color-row"; ?>">
                <span class="varition-title"><?= ucwords(strtolower($key))?></span>
                <div class="variations color ms-2">
                  <?php
                  for ($i=0; $i < sizeOf($value); $i++) { 
                    $this_price = isset($value[$i]->price) ? $value[$i]->price : 0;
                    if($key == "colors") {
                  ?>
                    <span data-variation-type="<?= $key; ?>" data-variation-price="<?= $this_price; ?>" data-variation-code="<?= $value[$i]->code; ?>" data-variation-name="<?= $value[$i]->name; ?>" class="" style="color:<?= $value[$i]->code;?>; <?= ($value[$i]->code == '#FFFFFF') ? "color:#000;" : "";?>"><i style="background:<?= $value[$i]->code;?>;"></i> <?= $value[$i]->name;?></span>
                  <?php
                    } else {
                      $this_name = isset($value[$i]->name) ? $value[$i]->name : $value[$i];
                  ?>
                    <span data-variation-type="<?= $key; ?>" data-variation-price="<?= $this_price; ?>" data-variation-option="<?= $this_name; ?>" class="" style="border-color:#fff;"> <?= $this_name ?></span>
                  <?php
                    }
                  }
                  ?>
                </div>
              </div>
            <?php
          }
        ?>			 
		 
			  <div class="variation-row mt-1">
				<div class="variations-pricing-row">				  
          <?= (!empty($product['product_msrp'])) ? '<div class="regular-price" data-price="'.$product['product_msrp'].'">'.c_format($product['product_msrp']).'</div>' : '' ?>
          <div class="sale-price" data-price="<?= $product['product_price']; ?>"><?= (!empty($product['product_price'])) ? c_format($product['product_price']) : '' ?></div>

<div class="quantity-area" id="field1">
    <button type="button" id="sub" class="sub" <?=($product['product_type']=='video' || $product['product_type']=='videolink' || $product['product_type']=='downloadable') ? 'disabled' : '';?>>
        <i class="fa fa-minus"></i>
    </button>
    <input type="text" id="product-quantity" min="1" name="quantity" value="1" <?=($product['product_type']=='video' || $product['product_type']=='videolink' || $product['product_type']=='downloadable') ? 'disabled' : '';?>>
    <button type="button" id="add" class="add" <?=($product['product_type']=='video' || $product['product_type']=='videolink' || $product['product_type']=='downloadable') ? 'disabled' : '';?>>
        <i class="fa fa-plus"></i>
    </button>
</div>

          <?php if ($order_id && ($product['product_type']=='video' || $product['product_type']=='videolink')): ?>
            <?php $urls = base_url('store/vieworderdetails/'.$order_id."?referance=".$product['product_id']); ?>
            <button class="btn btn-cart-detail bg-main2 " onclick="location.href ='<?=$urls?>'"><?= __('store.start_course') ?></button>
            <?php else: ?>

        <!--quantity code to the add to cart button-->
        <?php if ($product['product_quantity'] > 0 || $product['product_quantity'] == -1): ?>
            <button data-product_id="<?= $product['product_id'] ?>"
                    data-product_name="<?= (!empty($product['product_name'])) ? $product['product_name'] : 'Lorem Ipsum' ?>"
                    class="btn btn-cart-detail bg-main2 btn-cart">
                <?= __('store.add_to_cart') ?>
                <?php if ($product['product_quantity'] > 0): ?>
                    (<?= $product['product_quantity']; ?>)
                <?php endif; ?>
            </button>
        <?php else: ?>
            <button class="btn btn-cart-detail bg-main2 btn-cart" disabled>
                <?= __('store.out_of_stock') ?>
            </button>
        <?php endif; ?>
        <!--quantity code to the add to cart button-->

          <?php endif ?>
					<div class="apply-coupon">
					   <input class="coupon-code" type="text" name="coupon" placeholder="<?= __('store.enter_coupon_code') ?>">
					   <button class="btn btn-apply-coupon bg-main text-white btn-apply-coupon" title="<?= __('store.apply_coupon_code') ?>"><?= __('store.apply') ?></button>
					   <img alt="<?= __('store.image') ?>"  src="<?= base_url('assets/store/default/'); ?>img/coupen.png" class="couponicon">
					</div>
          <div class="coupon-msg mt-1"></div>
					<?php
					$product_tags_arr = parse_product_tags($product['product_tags'] ?? '');
					if (!empty($product_tags_arr)):
					?>
					<div class="product-tags mt-3">
						<span class="tags-label"><i class="fas fa-tags me-1"></i><?= __('store.product_tag') ?>:</span>
						<?php foreach ($product_tags_arr as $tag): ?>
						<a href="<?= base_url('store/category?tag=' . urlencode($tag)) ?>" class="badge bg-light text-dark border me-1 mb-1 text-decoration-none fw-medium"><?= htmlspecialchars($tag) ?></a>
						<?php endforeach; ?>
					</div>
					<?php endif; ?>
				</div>
			  </div> 
		    </div>
	    </div>
   </div>
</section>

<section class="product-description-reviews">
   <div class="container">
      <div class="description-reviews-tabs">
	      <a href="javascript:void(0);" class="active dbtn"><?= __('store.description') ?></a>
	      <a href="javascript:void(0);" class="rbtn"><?= __('store.reviews') ?></a>
	  </div>
	  
	  <div class="discription-reviews-content">
	    <div class="description-content">
      <?= (!empty($product['product_description'])) ? html_entity_decode($product['product_description']) : '<h3 class="text-center text-muted p-4 no-review">'.__('store.product_description_not_available').'</h3>'; ?>
		  </div>
	  </div>
	  
	  <div class="product-reviews-all" style="display:none;">
      <?php if(!empty($ratings)) { ?>
        <?php foreach($ratings as $rating) { ?>
          <div class="reviews-box">
            <?php if($vendormanagereviewimage == 1) { ?>
              <div class="reviews-img-wrap">
              <?php if(!empty($rating['avatar'])) { ?>
                <img src="<?php echo base_url(); ?>assets/images/users/<?php echo $rating['avatar'];?>" onerror="this.src='<?=base_url('assets/images/no-user_image.jpg')?>';"/>
              <?php } else { ?>
                <img src="<?= base_url('assets/images/no-user_image.jpg')?>" alt="<?= __('store.user') ?>" />
              <?php } ?>
            </div>
             <?php } ?>
            <div class="rview-content-text">
              <div class="reviews-top-row">
                <h3><?= $rating['firstname']." ".$rating['lastname'];?></h3>
                <div class="reviews-star">
                  <?php
                  $rating_count = (int)$rating['rating_number'];
                  for ($i=0; $i < $rating_count; $i++) { 
                  ?>
                  <img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/'); ?>img/st.png">
                  <?php
                  }
                  while($rating_count < 5) {
                  ?>
                  <img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/'); ?>img/st1.png">
                  <?php        
                  $rating_count++;            
                  }
                  ?>
                </div>
                <span><?= (!empty($rating['rating_created'])) ? $rating['rating_created'] : "10.11.2020"; ?></span>
              </div>
            
              <p><?= (!empty($rating['rating_comments'])) ? $rating['rating_comments'] : "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";?></p>
            </div>
          </div>
        <?php } ?>
      <?php } else { ?>
          <h3 class="text-left text-center text-muted p-4 no-review"><?= __('store.there_are_no_reviews_for_this_product') ?></h3>
      <?php } ?>

        <?php if($allowReview){ ?>
            <hr>
            <div class="">
                <div class="clearfix"></div>
                <h2 class="write-review"><?= __('store.write_a_review') ?></h2><br>
                <div id="createRatting" class="create_Rating">
                    <input name="user_id" id="user_id" type="hidden" value="<?php echo !empty($session) ? $session['id'] : '';?>" />
                    <input name="product_id" value="<?php echo $product['product_id'];?>" id="product_id" type="hidden" />
                    <div class="mb-3">
                        <label class="form-label"><?= __('store.your_review') ?></label>
                        <textarea name="comment" id="comment" placeholder="<?= __('store.enter_your_review') ?>" cols="80" class="form-control"></textarea>
                        <div class="help-block"><span class="text-danger"><?= __('store.note') ?></span> <?= __('store.html_is_not_translated') ?></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label"><?= __('store.email') ?></label>
                        <input name="email" id="post_email" placeholder="<?= __('store.enter_your_email') ?>" type="text" value="" class="form-control" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label"><?= __('store.rating') ?></label>
                        <div class="clearfix"></div>
                        <div class="give-rating"></div>
                        <input name="rating" value="0" id="rating_star" type="hidden" />
                    </div>
                    <button class="btn btn-success" name="submit" id="submit" onclick="processRating()"> <?= __('store.leave_a_review') ?> </button>
                </div>
            </div>
        <?php } ?>
	  </div>
   </div>
</section>

<section class="related-products">
  <div class="container">
    <div class="home-trend-top pt-0">
      <h2 class="section-title">
        <img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/'); ?>img/package-b.png"> <?= __('store.similar_products') ?> 
      </h2>
    </div>
  
    <div class="product-row d-flex flex-wrap product-list-related">
      
    </div>
    <a href="javascript:void(0);" class="see-more see-more-related" data-next_page="1">
			<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/'); ?>img/loading.png" /> <?= __('store.show_more') ?>
		</a>
  </div>
</section>

<?= $social_share_modal; ?> 

<?php include 'product-list-template.php';  ?>

<script type="text/javascript">

  $(document).ready(function() {

    load_Product(null, {
      product_id : $('#product-category').data('product_id'),
      category_id : $('#product-category').data('category_id')
    });

    $(document).on('click', '#btn-add-to-wishlist',function(){
      <?php if($login_usr == false) { ?>
        window.location.replace('<?= base_url('store/login');?>');
      <?php } else { ?>

        let status = $(this).hasClass('w-listed');
        $(this).toggleClass('w-listed');
        $.ajax({
          url:'<?= base_url('Store/toggle_wishlist') ?>',
          type:'POST',
          dataType:'json',
          data: { product_id : <?= $product['product_id'] ?>},
          success:function(json){
            // do nothing
          },
        });
      <?php } ?>
    });

    // slick carousel
    $('.slider').slick({
      infinite: true,
      speed: 300,
      slidesToShow: 5,
      slidesToScroll: 1,
      arrows: true,
      vertical: true,
      verticalSwiping: true,
      prevArrow: $('.prev-btn'),
      nextArrow: $('.next-btn')
    });

    $(".description-reviews-tabs a").click(function(){
      $(".description-reviews-tabs a").removeClass('active');
      $(this).addClass('active');
    });
    
    $(".checkout-payments-wrapper a").click(function(){
      $(".checkout-payments-wrapper a").removeClass('active');
      $(this).addClass('active');
    });
    
    $(".description-reviews-tabs a.rbtn").click(function(){
      $(".discription-reviews-content").hide();
      $(".product-reviews-all").show();
    });
    
    $(".description-reviews-tabs a.dbtn").click(function(){
      $(".discription-reviews-content").show();
      $(".product-reviews-all").hide();
    });

    if($('.give-rating').length) {
      $('.give-rating').starRating({
        initialRating:0,
        starSize: 20,
        readOnly:false,
        disableAfterRate:false,
        callback: function(currentRating, $el){
            $("#rating_star").val(currentRating);
        }
      });
    }

    $(document).on('click', '.see-more', function() {
      load_Product(null, {
        next_page: $(this).data('next_page'),
        product_id : $('#product-category').data('product_id'),
        category_id : $('#product-category').data('category_id')
      });
    });

    $(document).on('click', ".btn-apply-coupon", function(){
      let coupon_code = $(".apply-coupon .coupon-code").val();
      let product_id = '<?= $product['product_id'] ?>';
      if(coupon_code != "" && coupon_code != null) {
        $this = $(this);
        $.ajax({
            url:'<?= $add_coupon_url ?>',
            type:'POST',
            dataType:'json',
            data:{
                product_id:product_id,
                coupon_code:coupon_code,
            },
            beforeSend:function(){$this.btn("loading");},
            complete:function(){$this.btn("reset");},
            success:function(json){
                $(".coupon-msg").html('');
                
                if(json['success']){
                    $(".coupon-msg").html("<div class='alert alert-success' style='border-radius:20px;'>"+ json['success'] +"</div>");
                }
                if(json['error']){
                    $(".coupon-msg").html("<div class='alert alert-danger' style='border-radius:20px;'>"+ json['error'] +"</div>");
                }
            },
        });
      }
    });

    $(document).on('click', '.variations-pricing-row .add', function () {
        if ($(this).prev().val() < 350) {
          $(this).prev().val(+$(this).prev().val() + 1);
        }
    });
    
    $(document).on('click', '.variations-pricing-row .sub', function () {
        if ($(this).next().val() > 1) {
          if ($(this).next().val() > 1) $(this).next().val(+$(this).next().val() - 1);
        }
    });
  });


  function processRating(){
      if($('#name').length > 0){ var name = $('#name').val(); } else { var name = ''; }
      var email = $('#post_email').val();
      var rating_star = $('#rating_star').val();
      var product_id = $('#product_id').val();
      var user_id = $('#user_id').val();
      var comment = $('#comment').val();
      if(comment != '' && rating_star != 0){
          $("#submit").prop("disabled",true);
          $.ajax({
              type: 'POST',
              url: '<?php echo base_url();?>product/rating',
              data: 'product_id='+product_id+'&user_id='+user_id+'&comment='+comment+'&name='+name+'&email='+email+'&number='+rating_star,
              success : function(data) {
                  window.location.reload();
                  $("#submit").prop("disabled",false);
              }
          });
      } else {
          alert('<?= __('store.please_write_some_comment') ?>');
      }
  }

  function load_Product(search, postData = {}) {
		var data = postData;
		data.search = search;
		data.request_page = 'product-details';
		var ajaxReq = 'ToCancelPrevReq';
		var ajaxReq = $.ajax({
			url: "<?= base_url() ?>" + 'Store/load_Product',
			type: 'POST',
			dataType: 'JSON',
			data: data,
			beforeSend : function() {
				if(ajaxReq != 'ToCancelPrevReq' && ajaxReq.readyState < 4) {
					ajaxReq.abort();
				}
				$('.btn-search').addClass('btn-loading');
			},
			complete : function() {
				$('.btn-search').removeClass('btn-loading');
			},
			success: function(res) {
				if(res.related) {
          if(postData.next_page && postData.next_page > 1) {
            $('.product-list-related').append(Mustache.render($('#product-list-template').html(), res.related));
          } else {
            $('.product-list-related').html(Mustache.render($('#product-list-template').html(), res.related));
          }
					$('.see-more-related').data('next_page', res.related.next_page);
					if(res.related.is_last_page) {
						$('.see-more-related').hide();
					}
				}
			}
		});
	}

  var x, i, j, l, ll, selElmnt, a, b, c;
  /*look for any elements with the class "custom-select":*/
  x = document.getElementsByClassName("custom-select");
  l = x.length;
  for (i = 0; i < l; i++) {
    selElmnt = x[i].getElementsByTagName("select")[0];
    ll = selElmnt.length;
    /*for each element, create a new DIV that will act as the selected item:*/
    a = document.createElement("DIV");
    a.setAttribute("class", "select-selected");
    a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
    x[i].appendChild(a);
    /*for each element, create a new DIV that will contain the option list:*/
    b = document.createElement("DIV");
    b.setAttribute("class", "select-items select-hide");
    for (j = 1; j < ll; j++) {
      /*for each option in the original select element,
      create a new DIV that will act as an option item:*/
      c = document.createElement("DIV");
      c.innerHTML = selElmnt.options[j].innerHTML;
      c.addEventListener("click", function(e) {
          /*when an item is clicked, update the original select box,
          and the selected item:*/
          var y, i, k, s, h, sl, yl;
          s = this.parentNode.parentNode.getElementsByTagName("select")[0];
          sl = s.length;
          h = this.parentNode.previousSibling;
          for (i = 0; i < sl; i++) {
            if (s.options[i].innerHTML == this.innerHTML) {
              s.selectedIndex = i;
              h.innerHTML = this.innerHTML;
              y = this.parentNode.getElementsByClassName("same-as-selected");
              yl = y.length;
              for (k = 0; k < yl; k++) {
                y[k].removeAttribute("class");
              }
              this.setAttribute("class", "same-as-selected");
              break;
            }
          }
          h.click();
      });
      b.appendChild(c);
    }
    x[i].appendChild(b);
    a.addEventListener("click", function(e) {
        /*when the select box is clicked, close any other select boxes,
        and open/close the current select box:*/
        e.stopPropagation();
        closeAllSelect(this);
        this.nextSibling.classList.toggle("select-hide");
        this.classList.toggle("select-arrow-active");
      });
  }
  
  function closeAllSelect(elmnt) {
    var x, y, i, xl, yl, arrNo = [];
    x = document.getElementsByClassName("select-items");
    y = document.getElementsByClassName("select-selected");
    xl = x.length;
    yl = y.length;
    for (i = 0; i < yl; i++) {
      if (elmnt == y[i]) {
        arrNo.push(i)
      } else {
        y[i].classList.remove("select-arrow-active");
      }
    }
    for (i = 0; i < xl; i++) {
      if (arrNo.indexOf(i)) {
        x[i].classList.add("select-hide");
      }
    }
  }

  document.addEventListener("click", closeAllSelect); 


  $(document).on('click', '.variations span', function(){
    $(this).parent().find('.active').removeClass('active');
    $(this).addClass('active');
    $('.btn-cart').removeAttr('data-bs-title');
    hideTooltip();
    display_price_changes();
  });

  function display_price_changes()
   {
    let variationSelectedPrice = 0;
    if($('.variation-row .variations').length != 0) 
    {
      $('.variation-row .variations').each(function(){
        let type = $(this).find('span:first-child').data('variation-type');
        let optionSpan = $(this).find('.active');
        variationSelectedPrice += optionSpan.length ? parseFloat(optionSpan.data('variation-price')) : 0;
      });
    }

    
   let currencyRatio = '<?= str_replace(',','',c_format(1,false)); ?>';
   let currency = $('a[data-currency-symbol]').data('currency-symbol');
   let product_regular_price=$('.regular-price').attr('data-price');
   let product_sale_price=$('.sale-price').attr('data-price');
    $.ajax({
              type: 'POST',
              url: '<?php echo base_url();?>product/displayprice',
              data: 'currencyRatio='+currencyRatio+'&currency='+currency+'&variationSelectedPrice='+variationSelectedPrice+'&product_regular_price='+product_regular_price+'&product_sale_price='+product_sale_price,
              success : function(response) {
                console.log(response);
                var obj = jQuery.parseJSON(response); 
              // response from PHP back-end PHP server          
              $('.sale-price').text(obj.value1);
            $('.regular-price').text(obj.value2);
              }
          }); 
  }
</script>

<!-- V14: Product Recommendations -->
<div class="container cross-sell-section">
    <h5><i class="fas fa-fire me-2 text-warning"></i><?= __('store.customers_also_bought') ?></h5>
    <div id="recommendations-container" data-product-id="<?= $product['product_id'] ?>"></div>
</div>

<!-- V14: Sticky Add to Cart Bar -->
<div class="sticky-add-to-cart">
    <div class="container">
        <div class="product-summary d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center gap-3">
                <img src="<?= $product_featured_image ?>" alt="">
                <span class="product-name d-none d-md-inline"><?= htmlspecialchars($product['product_name']) ?></span>
            </div>
            <div class="d-flex align-items-center gap-3">
                <span class="product-price"><?= c_format($product['product_price'] ?? 0) ?></span>
                <button type="button" class="btn btn-primary btn-sm rounded-pill px-4 sticky-cart-btn" onclick="document.querySelector('.add-to-cart-btn, .btn-add-to-cart, [name=add_to_cart]')?.click()">
                    <i class="fas fa-cart-plus me-1"></i><?= __('store.sticky_add_to_cart') ?>
                </button>
            </div>
        </div>
    </div>
</div>
