<?php
/**
 * The template for displaying product content in the single-product.php template
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-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://woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 10.7.0
 */

defined('ABSPATH') || exit;

global $product;

if (empty($product) || !$product->is_visible()) {
    return;
}

// $pi_product_variable    = get_field('pi_product_variable');
// $pi_variable_value      = get_field('pi_variable_value');
// $pi_variable_link       = get_field('pi_variable_link');
// $pi_status              = get_field('pi_status');

$pi_custom_button       = get_field('pi_custom_button');
$pi_additionals         = get_field('pi_additionals');

$pi_items               = get_field('pi_items');
$pi_acc_title           = get_field('pi_acc_title');
$pi_acc_description     = get_field('pi_acc_description');
?>

<div class="single-product-custom mb fade-in">
    <div class="product-wrapper">
        <!-- Left: Product Image -->
        <div class="product-image">
            <?php
            if (has_post_thumbnail()) {
                echo get_the_post_thumbnail($product->get_id(), 'large');
            } else {
                echo wc_placeholder_img('large');
            }
            ?>
        </div>

        <!-- Right: Product Info -->
        <div class="product-summary">
            <!-- Top -->
            <div class="top-details">
                <h1 class="common-heading">
                    <?php the_title(); ?>
                </h1>
                <div class="product-desc">
                    <?php echo apply_filters('woocommerce_short_description', $product->get_short_description()); ?>
                </div>
                <div class="product-price">
                    <?php echo $product->get_price_html(); ?>
                </div>
            </div>


            <!-- Variation -->
            <div class="variation-wrapper">
                <div class="variation-title">
                    Select size
                </div>
                <?php
                if ($product->is_type('variable')) {
                    woocommerce_variable_add_to_cart();
                } else {
                    woocommerce_simple_add_to_cart();
                }
                ?>

                <div class="customize">
                    <a href="<?php echo $pi_custom_button['link'] ?>">
                        <?php echo $pi_custom_button['text'] ?>
                    </a>
                    <div class="note">
                        Only pre-orders can be customized
                    </div>
                </div>
            </div>            

            <!-- SKU -->
            <div class="product-bottom">
                <div class="sku">
                    Item Code: <?php echo $product->get_sku(); ?>
                </div>
            </div>

            <!-- Additional -->
            <?php if ($pi_additionals) : ?>
            <div class="additional">
                <div class="title">
                    You might also need
                </div>
                <div class="add-wrap">
                    <?php
                    foreach ($pi_additionals as $pi) :

                        $pi_add_name  = $pi['pi_add_name'];
                        $pi_add_price = $pi['pi_add_price'];
                    ?>
                        <div class="item">
                            <div class="add-name">
                                <?php echo $pi_add_name; ?>
                            </div>
                            <div class="add-price">
                                <?php echo $pi_add_price; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>

    <?php
    if ($pi_items) :
    ?>
        <div class="product-details">
            <?php
            foreach ($pi_items as $pi) :
                $pi_acc_title        = $pi['pi_acc_title'];
                $pi_acc_description  = $pi['pi_acc_description'];
            ?>
                <div class="acc-item">
                    <div class="acc-head">
                        <div class="title">
                            <?php echo $pi_acc_title; ?>
                        </div>
                        <div class="icon">
                            +
                        </div>
                    </div>
                    <div class="acc-body">
                        <?php echo $pi_acc_description; ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php
    endif;
    ?>

    <!-- Explore More -->
    <?php
    $current_product_id = $product->get_id();

    $product_terms = wp_get_post_terms($current_product_id, 'product_cat');

    $main_category = '';

    if (!empty($product_terms)) {

        foreach ($product_terms as $term) {

            if ($term->parent == 0) {
                $main_category = $term->term_id;
                break;
            }

        }

    }

    $args = array(
        'post_type'      => 'product',
        'posts_per_page' => 10,
        'post_status'    => 'publish',
        'post__not_in'   => array($current_product_id),
        'orderby'        => 'date',
        'order'          => 'DESC',
        'tax_query'      => array(
            array(
                'taxonomy' => 'product_cat',
                'field'    => 'term_id',
                'terms'    => $main_category,
            )
        )
    );

    $related_products = new WP_Query($args);

    if ($related_products->have_posts()) :
    ?>

    <div class="explore-more-wrapper fade-in">

        <h2 class="title">
            Explore more
        </h2>

        <div class="explore-more-slider owl-carousel">

            <?php while ($related_products->have_posts()) : $related_products->the_post(); ?>

                <?php
                global $product;
                ?>

                <a href="<?php the_permalink(); ?>" class="item">

                    <div class="image">

                        <?php
                        if (has_post_thumbnail()) {

                            the_post_thumbnail('medium');

                        } else {

                            echo wc_placeholder_img('medium');

                        }
                        ?>

                    </div>

                    <div class="product-title">
                        <?php the_title(); ?>
                    </div>

                </a>

            <?php endwhile; ?>

        </div>

    </div>

    <?php
    endif;

    wp_reset_postdata();
    ?>
</div>

<?php
$ba_sub_heading		= get_field('ba_sub_heading', 'option');
$ba_heading			= get_field('ba_heading', 'option');
$ba_desc			= get_field('ba_desc', 'option');
$ba_button			= get_field('ba_button', 'option');
?>

<div class="shop-cta-section fade-in">
	<div class="wrapper">
		<div class="col-1">
			<?php
			if ($ba_sub_heading) :
				echo '<div class="sub-heading">' . $ba_sub_heading . '</div>';
			endif;

			if ($ba_heading) :
				echo '<div class="heading">' . $ba_heading . '</div>';
			endif;

			if ($ba_desc) :
				echo '<div class="desc">' . $ba_desc . '</div>';
			endif;
			?>
		</div>
		<div class="col-2">
			<?php
			if ($ba_button['link'] && $ba_button['text']) :
                echo '<a href="' . $ba_button['link'] . '" target="' . $ba_button['target'] . '" class="common-btn">';
                echo $ba_button['text'];
                echo '<svg> <use xlink:href="#btn_arr_w"></use> </svg>';
                echo '</a>';
            endif;
            ?>
		</div>
	</div>
</div>

<?php
$bb_sub_heading		= get_field('bb_sub_heading', 'option');
$bb_heading			= get_field('bb_heading', 'option');
$bb_items			= get_field('bb_items', 'option');

if ($bb_items) :
?>

	<div class="technique-banner">
		<div class="wrapper">
			<div class="col-1">
				<?php
				if ($bb_sub_heading) :
					echo '<div class="sub-heading">' . $bb_sub_heading . '</div>';
				endif;

				if ($bb_heading) :
					echo '<div class="heading">' . $bb_heading . '</div>';
				endif;
				?>
			</div>
			<div class="col-2">
				<div class="technique-slider owl-carousel">
					<?php
					foreach ($bb_items as $bb) :
						$bb_image		= $bb['bb_image'];
						$bb_image_url	= validateImage(600, 420, $bb_image);
						$bb_image_alt  	= validateImageAlt($bb_image);
						$bb_title		= $bb['bb_title'];
						$bb_desc		= $bb['bb_desc'];
					?>
						<div class="items">
							<div class="image">
								<img src="<?php echo $bb_image_url; ?>" alt="<?php echo $bb_image_alt; ?>">
							</div>
							<div class="cont">
								<div class="title js-toggle">
									<?php echo $bb_title; ?>
									<svg>
										<use xlink:href="#title_down"></use>
									</svg>
								</div>
								<?php if ($bb_desc) : ?>
									<div class="desc">
										<?php echo $bb_desc; ?>
									</div>
								<?php endif; ?>
							</div>
						</div>
					<?php
					endforeach;
					?>
				</div>
			</div>
		</div>
	</div>

<?php
endif;
?>

<?php 
	get_template_part( 'template-parts/content/content', 'components' );
?>

<script>
jQuery(document).ready(function($){

    $('.quantity').each(function(){

        if ($(this).find('.qty-minus').length) {
            return;
        }

        $(this).prepend('<button type="button" class="qty-minus">-</button>');
        $(this).append('<button type="button" class="qty-plus">+</button>');

    });


    $(document).on('click', '.qty-plus, .qty-minus', function(){

        var $qty = $(this).siblings('.qty');

        var currentVal = parseFloat($qty.val()) || 0;
        var max = parseFloat($qty.attr('max'));
        var min = parseFloat($qty.attr('min'));
        var step = parseFloat($qty.attr('step')) || 1;

        if ($(this).hasClass('qty-plus')) {

            if (max && currentVal >= max) {
                $qty.val(max);
            } else {
                $qty.val(currentVal + step);
            }

        } else {

            if (min && currentVal <= min) {
                $qty.val(min);
            } else if (currentVal > 1) {
                $qty.val(currentVal - step);
            }

        }

        $qty.trigger('change');

    });

});
</script>

<style>
.variations .label{
    display: none;
}

.variations .value select{
	display: none !important;
}

.reset_variations{
	display: none !important;
}

.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

.quantity input[type=number]{
    -moz-appearance: textfield;
}
</style>