<?php

/**
 * Single Product Image
 *
 * Custom gallery combining core single-product/product-image.php,
 * product-thumbnails.php and photoswipe.php into one Swiper + GLightbox
 * based markup. PhotoSwipe is not used by this theme.
 *
 * @hook woocommerce_before_single_product_summary
 * @package Kubelio\WooCommerce
 * @version 10.5.0
 */

defined('ABSPATH') || exit;

if (! function_exists('wc_get_gallery_image_html')) {
	return;
}

global $product;

if (! $product || ! $product instanceof WC_Product) {
	return;
}

$images              = array();
$featured_image_size = 'woocommerce_single';
$gallery_image_size  = 'woocommerce_thumbnail';
$image_caption       = true;

// Swiper options
$slider_options = array(
	'thumbnailSlides'       => 7,
	'thumbnailSlidesMobile' => 5,
);

// 1. Fetch standard images first
$featured_image_id = has_post_thumbnail($product->get_id()) ? $product->get_image_id() : get_option('woocommerce_placeholder_image');
$images[] = array(
	'id'    => $featured_image_id,
	'src'   => wp_get_attachment_image_url($featured_image_id, 'large'),
	'title' => get_the_title($featured_image_id),
	'class' => 'is-featured-image',
);

$gallery_image_ids = $product->get_gallery_image_ids();
if ($gallery_image_ids) {
	foreach ($gallery_image_ids as $gallery_image_id) {
		$images[] = array(
			'id'    => $gallery_image_id,
			'src'   => wp_get_attachment_image_url($gallery_image_id, 'large'),
			'title' => get_the_title($gallery_image_id),
		);
	}
}

// 2. Enhance with video if plugin is active
$images = apply_filters('kubelio_product_gallery_images', $images, $product);

$gallery_image_ids = $product->get_gallery_image_ids();
?>

<?php if ($images) : ?>
	<div id="rt_product_gallery" class="rt-product-images rt-swiper-gallery images js-product-gallery" data-options="<?php echo esc_attr(json_encode($slider_options)); ?>">

		<?php if (! empty($images)) : ?>
			<div class="rt-swiper rt-swiper-gallery__featured" style="--slides:1; --gap:10px; --slides-md:1; --gap-md:10px; --slides-lg:1; --gap-lg:10px;">
				<div class="swiper">
					<div class="swiper-wrapper">
						<?php foreach ($images as $index => $image) : ?>
							<?php $class = ! empty($image['class']) ? $image['class'] : ''; ?>
							<div class="swiper-slide rounded-lg overflow-hidden <?php echo esc_attr($class); ?>">
								<?php if (! empty($image['is_video_inline'])) : ?>
									<div class="rt-video-gallery__container">
										<div class="rt-video-gallery__wrapper">
											<?php
											if (! empty($image['video_html'])) {
												echo $image['video_html']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
											}
											?>
										</div>
									</div>
								<?php else : ?>
									<a href="<?php echo esc_url($image['src']); ?>" class="js-glightbox <?php echo ! empty($image['is_video_lightbox']) ? 'glightbox rt-video-gallery__link' : ''; ?>" data-glightbox="gallery"
										data-gallery="gallery-<?php echo esc_attr(get_the_ID()); ?>"
										data-title="<?php echo esc_attr($image['title']); ?>">
										<div class="rt-img relative">

											<button class="rt-img__zoom" type="button" aria-label="<?php echo esc_attr__('Zoom in', 'kubelio'); ?>">
												<i class="rt-icon">
													<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
														<path style="fill:none" d="M0 0h83.333v83.333H0z" />
														<path d="M75.972 59.294c0-1.335 1.092-2.433 2.419-2.433 1.328 0 2.42 1.098 2.42 2.433v19.337c0 1.334-1.092 2.432-2.42 2.432H59.156c-1.328 0-2.42-1.098-2.42-2.432 0-1.334 1.092-2.432 2.42-2.432h16.816V59.294Zm-68.402 0c0-1.335-1.092-2.433-2.419-2.433-1.328 0-2.42 1.098-2.42 2.433v19.337c0 1.334-1.092 2.432-2.42 2.432h19.235c1.328 0 2.42-1.098 2.42-2.432 0-1.334-1.092-2.432-2.42-2.432H7.57V59.294ZM76.016 23.99c0 1.335 1.092 2.433 2.419 2.433 1.328 0 2.42-1.098 2.42-2.433V4.653c0-1.335-1.092-2.433-2.42-2.433H59.2c-1.328 0-2.42 1.098-2.42 2.433 0 1.334 1.092 2.432 2.42 2.432h16.816V23.99Zm-68.402 0c0 1.335-1.092 2.433-2.419-2.433-1.328 0-2.42-1.098-2.42-2.433V4.653c0-1.335-1.092-2.433-2.42-2.433H24.43c1.328 0 2.42 1.098 2.42 2.433 0 1.334-1.092 2.432-2.42 2.432H7.614V23.99Z" />
													</svg>
												</i>
											</button>

											<?php echo wp_get_attachment_image($image['id'], $featured_image_size, false, array('class' => $class)); ?>

											<?php if (! empty($image['is_video_lightbox'])) : ?>
												<span class="rt-video-gallery__play-icon rt-video-gallery__play-icon--large">
													<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" class="bi bi-play-circle" viewBox="0 0 16 16">
														<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
														<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445" />
													</svg>
												</span>
											<?php endif; ?>

											<?php if ($image_caption && wp_get_attachment_caption($image['id'])) : ?>
												<div
													class="rt-img__description has-background-alt-background-color has-body-alt-color has-xx-small-font-size leading-md text-center py-10 px-10 md:py-20 md:px-20 absolute bottom-0 left-0 right-0">
													<div class="rt-img__caption line-clamp-3">
														<?php echo esc_html(wp_get_attachment_caption($image['id'])); ?>
													</div>
												</div>
											<?php endif; ?>

										</div>
									</a>
								<?php endif; ?>
							</div>
						<?php endforeach; ?>
					</div>

					<div class="swiper-pagination">
						<span class="swiper-pagination-bullet"></span>
						<span class="swiper-pagination-bullet"></span>
						<span class="swiper-pagination-bullet"></span>
					</div>
				</div>
			</div>
		<?php endif; ?>

		<?php if (count($images) > 1) : ?>
			<div class="rt-swiper rt-swiper-gallery__thumbnails" style="--slides: <?php echo esc_attr($slider_options['thumbnailSlidesMobile']); ?>; --gap: 10px; --slides-md: <?php echo esc_attr($slider_options['thumbnailSlides']); ?>; --slides-lg: <?php echo esc_attr($slider_options['thumbnailSlides']); ?>; --gap-lg: 10px; margin-top: 10px">
				<div class="swiper">
					<div class="swiper-wrapper pb-10">

						<?php $class = ! empty($image['class']) ? $image['class'] : ''; ?>
						<?php foreach ($images as $index => $image) : ?>
							<div class="swiper-slide rounded-md overflow-hidden <?php echo esc_attr($class); ?>" data-index="<?php echo esc_attr($index); ?>">
								<div class="rt-img relative">
									<?php
									$is_video = (! empty($image['is_video_inline']) || ! empty($image['is_video_lightbox']));
									if ($is_video && empty($image['has_custom_thumbnail'])) : ?>
										<div class="rt-video-gallery__thumb-placeholder"></div>
									<?php elseif ($is_video && ! empty($image['auto_thumbnail'])) : ?>
										<div class="rt-video-gallery__thumb-wrapper">
											<img src="<?php echo esc_url($image['auto_thumbnail']); ?>" class="rt-video-gallery__thumb-img" alt="<?php echo esc_attr(get_the_title()); ?>">
										</div>
									<?php else : ?>
										<?php echo wp_get_attachment_image($image['id'], $gallery_image_size, false, array('class' => $class)); ?>
									<?php endif; ?>

									<?php if ($is_video) : ?>
										<span class="rt-video-gallery__play-icon rt-video-gallery__play-icon--small">
											<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" class="bi bi-play-circle" viewBox="0 0 16 16">
												<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
												<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445" />
											</svg>
										</span>
									<?php endif; ?>
								</div>
							</div>
						<?php endforeach; ?>
					</div>
				</div>
			</div>
		<?php endif; ?>

	</div>
<?php endif; ?>