<?php
/**
 * Widget Name: Product Gallery
 * Description: A self-contained WooCommerce product image gallery for the current
 *              product or a chosen product. Shows the featured image plus gallery
 *              images with thumbnail navigation (bottom / left), a grid layout, a
 *              built-in lightbox, optional slider arrows, a sale badge and multiple
 *              attractive styles.
 *
 * @package    captain-widgets-kit
 * @subpackage captain-widgets-kit/includes
 * @since      1.3.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Border;

/**
 * Class Captwiki_Woo_Product_Gallery
 *
 * @since 1.3.0
 */
class Captwiki_Woo_Product_Gallery extends Widget_Base {

	/**
	 * Get widget name.
	 *
	 * @since 1.3.0
	 * @return string
	 */
	public function get_name(): string {
		return 'captwiki-woo-product-gallery';
	}

	/**
	 * Get widget title.
	 *
	 * @since 1.3.0
	 * @return string
	 */
	public function get_title(): string {
		return esc_html__( 'Product Gallery', 'captain-widgets-kit' );
	}

	/**
	 * Get widget icon.
	 *
	 * @since 1.3.0
	 * @return string
	 */
	public function get_icon(): string {
		return 'eicon-product-images captwiki-el-logo';
	}

	/**
	 * Get widget categories.
	 *
	 * @since 1.3.0
	 * @return array
	 */
	public function get_categories(): array {
		return array( 'captwiki-woo-commerce' );
	}

	/**
	 * Get widget keywords.
	 *
	 * @since 1.3.0
	 * @return array
	 */
	public function get_keywords(): array {
		return array( 'woocommerce', 'woo', 'product', 'gallery', 'images', 'slider', 'lightbox', 'thumbnails', 'captain-widgets-kit' );
	}

	/**
	 * Disable Elementor's default inner wrapper.
	 *
	 * @since 1.3.0
	 * @return bool
	 */
	public function has_widget_inner_wrapper(): bool {
		return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}

	/**
	 * Available visual styles.
	 *
	 * @since 1.3.0
	 * @return array
	 */
	private function captwiki_style_options(): array {
		return array(
			'style-1' => esc_html__( 'Style 1 – Classic', 'captain-widgets-kit' ),
			'style-2' => esc_html__( 'Style 2 – Card', 'captain-widgets-kit' ),
			'style-3' => esc_html__( 'Style 3 – Rounded', 'captain-widgets-kit' ),
		);
	}

	/**
	 * Build a list of published products for the source selector.
	 *
	 * @since 1.3.0
	 * @return array
	 */
	private function captwiki_get_products_options(): array {

		$options = array();

		if ( ! function_exists( 'wc_get_products' ) ) {
			return $options;
		}

		$products = wc_get_products(
			array(
				'status'  => 'publish',
				'limit'   => 50,
				'orderby' => 'title',
				'order'   => 'ASC',
				'return'  => 'objects',
			)
		);

		foreach ( $products as $product ) {
			$options[ $product->get_id() ] = $product->get_name();
		}

		return $options;
	}

	/**
	 * Register controls.
	 *
	 * @since 1.3.0
	 */
	protected function register_controls(): void {
		$this->register_content_controls();
		$this->register_main_style_controls();
		$this->register_thumbs_style_controls();
		$this->register_badge_style_controls();
		$this->register_arrows_style_controls();
	}

	/**
	 * Content tab controls.
	 *
	 * @since 1.3.0
	 */
	private function register_content_controls(): void {

		$this->start_controls_section(
			'section_content',
			array(
				'label' => esc_html__( 'Gallery', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'widget_style',
			array(
				'label'   => esc_html__( 'Style', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'style-1',
				'options' => $this->captwiki_style_options(),
			)
		);

		$this->add_control(
			'layout',
			array(
				'label'   => esc_html__( 'Layout', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'thumbs-bottom',
				'options' => array(
					'thumbs-bottom' => esc_html__( 'Thumbnails Bottom', 'captain-widgets-kit' ),
					'thumbs-left'   => esc_html__( 'Thumbnails Left', 'captain-widgets-kit' ),
					'grid'          => esc_html__( 'Grid', 'captain-widgets-kit' ),
				),
			)
		);

		$this->add_control(
			'product_source',
			array(
				'label'   => esc_html__( 'Product', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'current',
				'options' => array(
					'current'  => esc_html__( 'Current Product', 'captain-widgets-kit' ),
					'specific' => esc_html__( 'Select a Product', 'captain-widgets-kit' ),
				),
			)
		);

		$this->add_control(
			'product_id',
			array(
				'label'       => esc_html__( 'Choose Product', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::SELECT2,
				'label_block' => true,
				'options'     => $this->captwiki_get_products_options(),
				'condition'   => array( 'product_source' => 'specific' ),
			)
		);

		$this->add_responsive_control(
			'thumbs_columns',
			array(
				'label'     => esc_html__( 'Thumbnail Columns', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array( 'px' => array( 'min' => 2, 'max' => 8, 'step' => 1 ) ),
				'default'   => array( 'size' => 5 ),
				'selectors' => array(
					'{{WRAPPER}} .captwiki-pg[data-layout="thumbs-bottom"] .captwiki-pg__thumbs' => 'grid-template-columns: repeat({{SIZE}}, 1fr);',
					'{{WRAPPER}} .captwiki-pg[data-layout="grid"] .captwiki-pg__grid'             => 'grid-template-columns: repeat({{SIZE}}, 1fr);',
				),
			)
		);

		$this->add_control(
			'enable_lightbox',
			array(
				'label'        => esc_html__( 'Enable Lightbox', 'captain-widgets-kit' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'captain-widgets-kit' ),
				'label_off'    => esc_html__( 'No', 'captain-widgets-kit' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		$this->add_control(
			'show_arrows',
			array(
				'label'        => esc_html__( 'Show Navigation Arrows', 'captain-widgets-kit' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'captain-widgets-kit' ),
				'label_off'    => esc_html__( 'No', 'captain-widgets-kit' ),
				'return_value' => 'yes',
				'default'      => 'yes',
				'description'  => esc_html__( 'Previous / next arrows over the main image (not used in grid layout).', 'captain-widgets-kit' ),
			)
		);

		$this->add_control(
			'show_sale_badge',
			array(
				'label'        => esc_html__( 'Show Sale Badge', 'captain-widgets-kit' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'captain-widgets-kit' ),
				'label_off'    => esc_html__( 'No', 'captain-widgets-kit' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		$this->add_control(
			'sale_badge_text',
			array(
				'label'       => esc_html__( 'Sale Badge Text', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Sale!', 'captain-widgets-kit' ),
				'condition'   => array( 'show_sale_badge' => 'yes' ),
				'label_block' => true,
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Main image style controls.
	 *
	 * @since 1.3.0
	 */
	private function register_main_style_controls(): void {

		$main_selector = '{{WRAPPER}} .captwiki-pg__main';
		$img_selector  = '{{WRAPPER}} .captwiki-pg__main img, {{WRAPPER}} .captwiki-pg__grid img';

		$this->start_controls_section(
			'section_style_main',
			array(
				'label' => esc_html__( 'Main Image', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'main_border',
				'selector' => $img_selector,
			)
		);

		$this->add_responsive_control(
			'main_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					$img_selector => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'main_box_shadow',
				'selector' => $img_selector,
			)
		);

		$this->add_responsive_control(
			'main_spacing',
			array(
				'label'      => esc_html__( 'Spacing', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array( 'px' => array( 'min' => 0, 'max' => 60, 'step' => 1 ) ),
				'default'    => array( 'size' => 14 ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-pg' => 'gap: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Thumbnail style controls.
	 *
	 * @since 1.3.0
	 */
	private function register_thumbs_style_controls(): void {

		$thumb_selector = '{{WRAPPER}} .captwiki-pg__thumb img';

		$this->start_controls_section(
			'section_style_thumbs',
			array(
				'label' => esc_html__( 'Thumbnails', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_responsive_control(
			'thumbs_gap',
			array(
				'label'      => esc_html__( 'Gap', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array( 'px' => array( 'min' => 0, 'max' => 30, 'step' => 1 ) ),
				'default'    => array( 'size' => 10 ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-pg__thumbs, {{WRAPPER}} .captwiki-pg__grid' => 'gap: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_control(
			'thumb_opacity',
			array(
				'label'      => esc_html__( 'Inactive Opacity', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'range'      => array( 'px' => array( 'min' => 0.2, 'max' => 1, 'step' => 0.05 ) ),
				'default'    => array( 'size' => 0.6 ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-pg__thumb' => 'opacity: {{SIZE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'thumb_border',
				'selector' => $thumb_selector,
			)
		);

		$this->add_responsive_control(
			'thumb_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					$thumb_selector => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_control(
			'thumb_active_border_color',
			array(
				'label'     => esc_html__( 'Active Border Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#2563eb',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-pg__thumb.is-active img' => 'border-color: {{VALUE}};',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Sale badge style controls.
	 *
	 * @since 1.3.0
	 */
	private function register_badge_style_controls(): void {

		$badge_selector = '{{WRAPPER}} .captwiki-pg__sale';

		$this->start_controls_section(
			'section_style_badge',
			array(
				'label'     => esc_html__( 'Sale Badge', 'captain-widgets-kit' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array( 'show_sale_badge' => 'yes' ),
			)
		);

		$this->add_control(
			'badge_color',
			array(
				'label'     => esc_html__( 'Text Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					$badge_selector => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'badge_bg',
			array(
				'label'     => esc_html__( 'Background Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					$badge_selector => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'badge_typography',
				'selector' => $badge_selector,
			)
		);

		$this->add_responsive_control(
			'badge_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					$badge_selector => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'badge_padding',
			array(
				'label'      => esc_html__( 'Padding', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', 'em' ),
				'selectors'  => array(
					$badge_selector => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'badge_offset_v',
			array(
				'label'      => esc_html__( 'Vertical Offset', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array( 'px' => array( 'min' => 0, 'max' => 80, 'step' => 1 ) ),
				'selectors'  => array(
					$badge_selector => 'top: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'badge_offset_h',
			array(
				'label'      => esc_html__( 'Horizontal Offset', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array( 'px' => array( 'min' => 0, 'max' => 80, 'step' => 1 ) ),
				'selectors'  => array(
					$badge_selector => 'left: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Navigation arrow style controls.
	 *
	 * @since 1.3.0
	 */
	private function register_arrows_style_controls(): void {

		$arrow_selector = '{{WRAPPER}} .captwiki-pg__nav';

		$this->start_controls_section(
			'section_style_arrows',
			array(
				'label'     => esc_html__( 'Arrows', 'captain-widgets-kit' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array( 'show_arrows' => 'yes' ),
			)
		);

		$this->add_control(
			'arrow_color',
			array(
				'label'     => esc_html__( 'Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					$arrow_selector => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'arrow_bg',
			array(
				'label'     => esc_html__( 'Background', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					$arrow_selector => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->add_responsive_control(
			'arrow_size',
			array(
				'label'      => esc_html__( 'Size', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array( 'px' => array( 'min' => 24, 'max' => 64, 'step' => 1 ) ),
				'selectors'  => array(
					$arrow_selector => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'arrow_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					$arrow_selector => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Resolve the product to render the gallery for.
	 *
	 * @since 1.3.0
	 * @param array $settings Widget settings.
	 * @return \WC_Product|false
	 */
	private function captwiki_resolve_product( array $settings ) {

		$source = ! empty( $settings['product_source'] ) ? $settings['product_source'] : 'current';

		if ( 'specific' === $source && ! empty( $settings['product_id'] ) ) {
			return wc_get_product( absint( $settings['product_id'] ) );
		}

		$product = wc_get_product( get_the_ID() );

		if ( $product ) {
			return $product;
		}

		// Editor / preview fallback — grab the latest published product.
		if ( \Elementor\Plugin::$instance->editor->is_edit_mode() || \Elementor\Plugin::$instance->preview->is_preview_mode() ) {
			$latest = wc_get_products(
				array(
					'status' => 'publish',
					'limit'  => 1,
				)
			);

			if ( ! empty( $latest ) ) {
				return $latest[0];
			}
		}

		return false;
	}

	/**
	 * Collect ordered gallery image IDs (featured first, then gallery).
	 *
	 * @since 1.3.0
	 * @param \WC_Product $product Product object.
	 * @return array
	 */
	private function captwiki_get_image_ids( \WC_Product $product ): array {

		$ids = array();

		if ( $product->get_image_id() ) {
			$ids[] = (int) $product->get_image_id();
		}

		foreach ( $product->get_gallery_image_ids() as $gallery_id ) {
			$ids[] = (int) $gallery_id;
		}

		return array_values( array_unique( array_filter( $ids ) ) );
	}

	/**
	 * Output an editor-only notice.
	 *
	 * @since 1.3.0
	 * @param string $message Notice text.
	 */
	private function captwiki_render_editor_notice( string $message ): void {

		if ( ! \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
			return;
		}

		echo '<div class="captwiki-pg captwiki-pg--notice"><p>' . esc_html( $message ) . '</p></div>';
	}

	/**
	 * Render a single thumbnail button.
	 *
	 * @since 1.3.0
	 * @param int    $id     Attachment ID.
	 * @param int    $index  Position in the gallery.
	 * @param bool   $active Whether it is the active thumb.
	 * @param string $large  Main image URL.
	 * @param string $full   Full image URL (lightbox).
	 */
	private function captwiki_render_thumb( int $id, int $index, bool $active, string $large, string $full ): void {

		$alt = trim( (string) get_post_meta( $id, '_wp_attachment_image_alt', true ) );

		printf(
			'<button type="button" class="captwiki-pg__thumb%1$s" data-index="%2$d" data-large="%3$s" data-full="%4$s" aria-label="%5$s">',
			$active ? ' is-active' : '',
			(int) $index,
			esc_url( $large ),
			esc_url( $full ),
			/* translators: %d: image number. */
			esc_attr( sprintf( __( 'View image %d', 'captain-widgets-kit' ), $index + 1 ) )
		);
		echo wp_get_attachment_image( $id, 'woocommerce_gallery_thumbnail', false, array( 'alt' => $alt ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		echo '</button>';
	}

	/**
	 * Render widget output on the frontend.
	 *
	 * @since 1.3.0
	 */
	protected function render(): void {

		if ( ! class_exists( 'WooCommerce' ) || ! function_exists( 'wc_get_product' ) ) {
			$this->captwiki_render_editor_notice( esc_html__( 'WooCommerce is required for the Product Gallery widget.', 'captain-widgets-kit' ) );
			return;
		}

		$settings = $this->get_settings_for_display();
		$product  = $this->captwiki_resolve_product( $settings );

		if ( ! $product instanceof \WC_Product ) {
			$this->captwiki_render_editor_notice( esc_html__( 'No product found. Place this widget on a product template or select a product.', 'captain-widgets-kit' ) );
			return;
		}

		$allowed_styles = array_keys( $this->captwiki_style_options() );
		$style          = ! empty( $settings['widget_style'] ) && in_array( $settings['widget_style'], $allowed_styles, true ) ? $settings['widget_style'] : 'style-1';

		$allowed_layouts = array( 'thumbs-bottom', 'thumbs-left', 'grid' );
		$layout          = ! empty( $settings['layout'] ) && in_array( $settings['layout'], $allowed_layouts, true ) ? $settings['layout'] : 'thumbs-bottom';

		wp_enqueue_script( 'captwiki-woo-product-gallery' );
		wp_enqueue_style(
			'captwiki-woo-product-gallery-' . $style,
			CAPTWIKI_URL . 'assets/css/widgets/woo-product-gallery/captwiki-woo-product-gallery-' . $style . '.css',
			array( 'captwiki-woo-product-gallery' ),
			CAPTWIKI_VERSION
		);

		$image_ids   = $this->captwiki_get_image_ids( $product );
		$lightbox    = ! empty( $settings['enable_lightbox'] ) && 'yes' === $settings['enable_lightbox'];
		$show_arrows = ! empty( $settings['show_arrows'] ) && 'yes' === $settings['show_arrows'] && 'grid' !== $layout;
		$show_sale   = ! empty( $settings['show_sale_badge'] ) && 'yes' === $settings['show_sale_badge'] && $product->is_on_sale();
		$sale_text   = ! empty( $settings['sale_badge_text'] ) ? $settings['sale_badge_text'] : esc_html__( 'Sale!', 'captain-widgets-kit' );

		$wrapper_classes = array(
			'captwiki-pg',
			'captwiki-' . $style,
			'captwiki-widget-' . $this->get_id(),
		);

		if ( $lightbox ) {
			$wrapper_classes[] = 'captwiki-pg--lightbox';
		}

		?>
		<div class="<?php echo esc_attr( implode( ' ', $wrapper_classes ) ); ?>"
			data-layout="<?php echo esc_attr( $layout ); ?>"
			data-lightbox="<?php echo $lightbox ? '1' : '0'; ?>">

			<?php if ( empty( $image_ids ) ) : ?>

				<div class="captwiki-pg__main">
					<img src="<?php echo esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ); ?>" alt="<?php echo esc_attr( $product->get_name() ); ?>" />
				</div>

			<?php elseif ( 'grid' === $layout ) : ?>

				<div class="captwiki-pg__grid">
					<?php foreach ( $image_ids as $index => $id ) : ?>
						<?php
						$full = wp_get_attachment_image_url( $id, 'full' );
						$alt  = trim( (string) get_post_meta( $id, '_wp_attachment_image_alt', true ) );
						?>
						<button type="button" class="captwiki-pg__grid-item" data-index="<?php echo (int) $index; ?>" data-full="<?php echo esc_url( $full ); ?>">
							<?php
							if ( $show_sale && 0 === $index ) {
								echo '<span class="captwiki-pg__sale">' . esc_html( $sale_text ) . '</span>';
							}
							echo wp_get_attachment_image( $id, 'woocommerce_single', false, array( 'alt' => $alt ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
							?>
						</button>
					<?php endforeach; ?>
				</div>

			<?php else : ?>

				<?php
				$first_id    = $image_ids[0];
				$first_large = wp_get_attachment_image_url( $first_id, 'woocommerce_single' );
				$first_full  = wp_get_attachment_image_url( $first_id, 'full' );
				$first_alt   = trim( (string) get_post_meta( $first_id, '_wp_attachment_image_alt', true ) );
				?>

				<div class="captwiki-pg__main" data-current="0">
					<?php if ( $show_sale ) : ?>
						<span class="captwiki-pg__sale"><?php echo esc_html( $sale_text ); ?></span>
					<?php endif; ?>

					<button type="button" class="captwiki-pg__main-btn" data-full="<?php echo esc_url( $first_full ); ?>" aria-label="<?php esc_attr_e( 'Zoom image', 'captain-widgets-kit' ); ?>">
						<?php echo wp_get_attachment_image( $first_id, 'woocommerce_single', false, array( 'class' => 'captwiki-pg__main-img', 'alt' => $first_alt ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
					</button>

					<?php if ( $show_arrows && count( $image_ids ) > 1 ) : ?>
						<button type="button" class="captwiki-pg__nav captwiki-pg__nav--prev" aria-label="<?php esc_attr_e( 'Previous image', 'captain-widgets-kit' ); ?>">
							<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
						</button>
						<button type="button" class="captwiki-pg__nav captwiki-pg__nav--next" aria-label="<?php esc_attr_e( 'Next image', 'captain-widgets-kit' ); ?>">
							<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
						</button>
					<?php endif; ?>
				</div>

				<?php if ( count( $image_ids ) > 1 ) : ?>
					<div class="captwiki-pg__thumbs">
						<?php
						foreach ( $image_ids as $index => $id ) {
							$large = wp_get_attachment_image_url( $id, 'woocommerce_single' );
							$full  = wp_get_attachment_image_url( $id, 'full' );
							$this->captwiki_render_thumb( $id, (int) $index, 0 === $index, (string) $large, (string) $full );
						}
						?>
					</div>
				<?php endif; ?>

			<?php endif; ?>
		</div>
		<?php
	}
}
