<?php
/**
 * The Template for displaying all single products
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see         https://docs.woocommerce.com/document/template-structure/
 * @package     WooCommerce\Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}





get_header( 'shop' ); ?>




<div class="bg-pro">
 <section  class="single-product">
  <div class="container">
    <div class="row">

        <?php if(have_posts()) : ?>
        <?php while(have_posts()) : the_post(); ?>
        <?php global $product; $product->get_id(); ?>

 <div class="block images col-12 col-md-6">


	<div  class="box box-img col-12 col-md-12">
	<?php // echo do_shortcode('[ti_wishlists_addtowishlist]') ?>

<div   id="NZoomImg" data-NZoomscale="2" class="col-12 col-xs-12">	
    	<div class="image showw image0"><?php the_post_thumbnail(); ?></div> 
        <?php $attachment_ids = $product->get_gallery_attachment_ids();
        foreach( $attachment_ids as $key => $attachment_id )  { ?>
    		<div class="image image<?php echo $key+1 ?>"><img src="<?php echo $full_url = wp_get_attachment_image_src( $attachment_id, 'full' )[0]; ?>" /></div> 
        <?php  } ?>
	
</div>			
		
		
	</div>

	<div class="box col-12 col-md-12">

		<ul class="var">
		<li class="image-li act act0"><?php the_post_thumbnail(); ?></li>

        <?php $attachment_ids = $product->get_gallery_attachment_ids();
        foreach( $attachment_ids as $key => $attachment_id )  { ?>
        <li class="image-li act<?php echo $key+1 ?>"><img src="<?php echo $full_url = wp_get_attachment_image_src( $attachment_id, 'full' )[0]; ?>" /></li>
        <?php  } ?>

		</ul>	
	</div><!--  -->



<script>
$(document).ready(function(){
  $("ul.var li").click(function(){
    $("ul.var li").removeClass("act");
    $(this).addClass("act");
  });



  $(".act0").click(function(){
    $(".image").removeClass("showw");
    $(".image0").addClass("showw");
  });

  $(".act1").click(function(){
    $(".image").removeClass("showw");
    $(".image1").addClass("showw");
  });

   $(".act2").click(function(){
    $(".image").removeClass("showw");
    $(".image2").addClass("showw");
  });

  $(".act3").click(function(){
    $(".image").removeClass("showw");
    $(".image3").addClass("showw");
  });

  $(".act4").click(function(){
    $(".image").removeClass("showw");
    $(".image4").addClass("showw");
  });

  $(".act5").click(function(){
    $(".image").removeClass("showw");
    $(".image5").addClass("showw");
  });


});
</script>




        <?php $attachment_ids = $product->get_gallery_attachment_ids();
        foreach( $attachment_ids as $key => $attachment_id )  { ?>

<!--          <div role="tabpanel" class="tab-pane" id="tab<?php echo $key; ?>">
             <img src="<?php echo $full_url = wp_get_attachment_image_src( $attachment_id, 'full' )[0]; ?>" />
         </div> -->

        <?php  } ?>



</div><!-- block -->











<div class="block col-12 col-md-6">

              <div class="product-summary">             
               <?php do_action( 'woocommerce_single_product_summary' ); ?>
              </div><!-- product-summary -->

              
              <div class="share">
              
                <div class="sher">
                  <div class="add heart" data-product-id="<?php echo get_the_ID(); ?>"></div>
                  <?php echo do_shortcode('[addtoany]') ?>
                </div>

              </div>

</div><!-- block -->

        <?php endwhile; ?>
        <?php else : ?>
        <?php endif; ?>
    </div>
  </div>
</section>

</div>


<section style="margin: 0 0 70px;" class="pro-content ">
  <div class="container">
    <div class="up">مواصفات المنتج</div>
   <?php the_content(); ?>

   <div class="up">مميزات المنتج</div>
<?php
function get_wc_short_desc( $product_id = null ) {
    $product = wc_get_product( $product_id ? $product_id : get_the_ID() );
    return $product ? $product->get_short_description() : '';
}
echo get_wc_short_desc();
?>
   


   <div class="up str">تقييمات المنتج</div>
   <div class="block col-12">

     <div class="block col-12"><?php echo do_shortcode('[cusrev_all_reviews]') ?></div>
     <div class="block col-12">
       <?php if ( is_user_logged_in() ) { ?>
        <?php comments_template(); ?>
        <?php } ?>
    </div>
     
    </div>


  </div>
</section>



<script>
document.addEventListener("DOMContentLoaded", function () {

    const stars = document.querySelectorAll(".stars a");

    stars.forEach((star, index) => {
        star.addEventListener("click", function(e) {
            e.preventDefault();

            // إزالة التفعيل من كل النجوم
            stars.forEach(s => s.classList.remove("active"));

            // تفعيل النجمة المضغوطة وكل اللي قبلها
            for (let i = 0; i <= index; i++) {
                stars[i].classList.add("active");
            }
        });
    });

});
</script>







<?php // include_once get_template_directory() . '/icons.php'; ?>
            



<section class="pro-page related category ">
  <div class="container">
    <div class="row "> 


<?php 

global $product; // If not set…

if( ! is_a( $product, 'WC_Product' ) ){
    $product = wc_get_product(get_the_id());
}

$args = array(
    'posts_per_page' => 8,
    'columns'        => 4,
    'orderby'        => 'rand',
    'order'          => 'desc',
);

$args['related_products'] = array_filter( array_map( 'wc_get_product', wc_get_related_products( $product->get_id(), $args['posts_per_page'], $product->get_upsell_ids() ) ), 'wc_products_array_filter_visible' );
$args['related_products'] = wc_products_array_orderby( $args['related_products'], $args['orderby'], $args['order'] );

// Set global loop values.
wc_set_loop_prop( 'name', 'related' );
wc_set_loop_prop( 'columns', $args['columns'] );

wc_get_template( 'single-product/related.php', $args );

 ?>


</div>
</div>
</section>






<style type="text/css">
	.pro-page{
		padding: 0 10px 0;
	}
	
</style>




<script>

$(document).ready(function(){
let t=document.getElementById("NZoomImg"),e=t.getAttribute("data-NZoomscale")<=0?1:t.getAttribute("data-NZoomscale"),s=t.clientWidth,o=t.clientHeight;$("#NZoomImg").replaceWith('<div id="NZoomContainer">'+t.outerHTML+"</div>");let i=$("#NZoomContainer"),n=$("#NZoomImg");i.css("width",s+"px"),i.css("height",o+"px"),i.mousemove(function(t){
let e=$(this).offset(),i=(t.pageX-e.left)/s*100<=100?(t.pageX-e.left)/s*100:100,c=(t.pageY-e.top)/o*100<=100?(t.pageY-e.top)/o*100:100;n.css("transform-origin",i+"% "+c+"%")}
),i.mouseenter(function(){
n.css("cursor","crosshair"),n.css("width",s+"px"),n.css("height",o+"px"),n.css("transition","0.2s"),n.css("transform","scale("+e+")")}
).mouseleave(function(){
n.css("transition","0.2s"),n.css("transform","scale(1)")}
)}
);
</script>




<?php
get_footer( 'shop' );

/* Omit closing PHP tag at the end of PHP files to avoid "headers already sent" issues. */
