<?php
/**
 * PowerPack Product Data Tabs Widget
 *
 * PowerPack Product Data Tabs widget uses WooCommerce's product tabs template to
 * fetch the data for the tabs.
 *
 * @package PowerPack for Elementor Pro
 */

namespace PowerpackElements\Modules\Woocommerce\Widgets;

use PowerpackElements\Base\Powerpack_Widget;
use PowerpackElements\Classes\PP_Helper;
use PowerpackElements\Classes\PP_Woo_Helper;

use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Plugin;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use Elementor\TemplateLibrary\Source_Local;

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

/**
 * Woo - Product Tabs widget
 */
class Woo_Product_Tabs extends Powerpack_Widget {

	const WIDGET = 'Woo_Product_Tabs';

	/**
	 * Repeater rows keyed by their row ID.
	 *
	 * @since 3.0.0
	 * @var array|null
	 */
	private $tab_items = null;

	/**
	 * Retrieve Woo - Product Tabs widget categories.
	 *
	 * @access public
	 *
	 * @return array Widget categories.
	 */
	public function get_categories() {
		return parent::get_woo_builder_categories();
	}

	/**
	 * Retrieve Woo - Product Tabs widget name.
	 *
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return parent::get_widget_name( self::WIDGET );
	}

	/**
	 * Retrieve Woo - Product Tabs widget title.
	 *
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return parent::get_widget_title( self::WIDGET );
	}

	/**
	 * Retrieve Woo - Product Tabs widget icon.
	 *
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return parent::get_widget_icon( self::WIDGET );
	}

	/**
	 * Get Woo - Product Tabs widget keywords.
	 *
	 * Retrieve the list of keywords the widget belongs to.
	 *
	 * @since 1.3.7
	 * @access public
	 *
	 * @return array Widget keywords.
	 */
	public function get_keywords() {
		return parent::get_widget_keywords( self::WIDGET );
	}

	/**
	 * Retrieve the list of scripts the Woo - Product Tabs widget depended on.
	 *
	 * Used to set scripts dependencies required to run the widget.
	 *
	 * @access public
	 *
	 * @return array Widget scripts dependencies.
	 */
	public function get_script_depends() {
		return [
			'jquery',
			'pp-product-tabs',
			'wc-single-product',
		];
	}

	/**
	 * Retrieve the list of styles the Woo - Product Tabs depended on.
	 *
	 * Used to set style dependencies required to run the widget.
	 *
	 * @access public
	 *
	 * @return array Widget styles dependencies.
	 */
	public function get_style_depends() {
		return [
			'pp-woocommerce',
		];
	}

	/**
	 * Whether the widget should render an inner wrapper element.
	 *
	 * @access public
	 *
	 * @return bool Whether to render the inner wrapper.
	 */
	public function has_widget_inner_wrapper(): bool {
		return ! PP_Helper::is_feature_active( 'e_optimized_markup' );
	}

	/**
	 * Register Woo - Product Tabs widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * Note on control IDs: this widget grew four naming schemes - kebab-case with
	 * '__', snake_case with '__', two prefixes that differ only by where the plural
	 * sits ('woo-product-tabs' vs 'woo-products-tab'), and one '--' separator. They
	 * cannot be tidied up, because control IDs are keys in saved page data and
	 * renaming one silently discards every user's stored value for it. So copy an
	 * ID verbatim from its add_control() call whenever you reference it in a
	 * 'condition', a 'selector' or the JS. Guessing is what hid six controls in the
	 * Indicator section behind a key that never existed. Use one consistent scheme
	 * for anything new.
	 *
	 * @access protected
	 */
	protected function register_controls() {

		// Content Tab
		$this->register_content_tab_controls();
		$this->register_content_layout_controls();
		$this->register_content_other_controls();

		// Style Tab

		$this->register_style_controls();

	}

	/**
	 * Register Content Tab - Tabs Section controls.
	 *
	 * Registers Tabs section controls under the Content Tab.
	 *
	 * @access protected
	 */
	protected function register_content_tab_controls() {

		$this->start_controls_section(
			'woo-product-tabs__general-section',
			[
				'label' => esc_html__( 'Tabs', 'powerpack' ),
			]
		);

		$repeater = new Repeater();

		$repeater->start_controls_tabs( 'tabs_at' );

		$repeater->start_controls_tab(
			'product_tabs_content',
			[
				'label' => esc_html__( 'Content', 'powerpack' ),
			]
		);

		$repeater->add_control(
			'title',
			[
				'label'       => esc_html__( 'Title', 'powerpack' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Tab', 'powerpack' ),
				'description' => esc_html__( 'This title will appear in the Tab Title.', 'powerpack' ),
			]
		);

		$repeater->add_control(
			'name',
			[
				'label'   => esc_html__( 'Tab', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'description',
				'options' => [
					'description'            => esc_html__( 'Description', 'powerpack' ),
					'reviews'                => esc_html__( 'Reviews', 'powerpack' ),
					'additional_information' => esc_html__( 'Additional Information', 'powerpack' ),
					'custom'                 => esc_html__( 'Custom Tab', 'powerpack' ),
				],
			]
		);

		$repeater->add_control(
			'custom_tab_type',
			[
				'label'     => esc_html__( 'Content', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'custom',
				'options'   => [
					'custom'         => esc_html__( 'Custom', 'powerpack' ),
					'saved_template' => esc_html__( 'Saved Template', 'powerpack' ),
				],
				'condition' => [
					'name' => 'custom',
				],
			]
		);

		$repeater->add_control(
			'custom_content',
			[
				'label'       => esc_html__( 'Custom Content', 'powerpack' ),
				'type'        => Controls_Manager::WYSIWYG,
				'default'     => esc_html__( 'Add custom content, shortcodes, and more.', 'powerpack' ),
				'placeholder' => esc_html__( 'Placeholder', 'powerpack' ),
				'condition'   => [
					'custom_tab_type' => 'custom',
					'name'            => 'custom',
				],
			]
		);

		$repeater->add_control(
			'template_content',
			[
				'label'      => esc_html__( 'Choose Template', 'powerpack' ),
				'type'       => 'pp-query',
				'multiple'   => false,
				'query_type' => 'templates',
				'condition'  => [
					'custom_tab_type' => 'saved_template',
				],
			]
		);

		$repeater->end_controls_tab();

		$repeater->start_controls_tab(
			'product_tabs_icon',
			[
				'label' => esc_html__( 'Icon', 'powerpack' ),
			]
		);

		$repeater->add_control(
			'product_tab_icon',
			[
				'label'            => esc_html__( 'Icon', 'powerpack' ),
				'type'             => Controls_Manager::ICONS,
				'label_block'      => true,
				'default'          => [
					'value'   => 'fas fa-check',
					'library' => 'fa-solid',
				],
				'fa4compatibility' => 'icon',
			]
		);

		$repeater->end_controls_tab();

		$repeater->end_controls_tabs();

		$this->add_control(
			'product_tabs--repeater-section',
			[
				'label'              => '',
				'type'               => Controls_Manager::REPEATER,
				'fields'             => $repeater->get_controls(),
				'default'            => [
					[
						'name'  => 'description',
						'title' => esc_html__( 'Description', 'powerpack' ),
					],
					[
						'name'  => 'reviews',
						'title' => esc_html__( 'Reviews', 'powerpack' ),
					],
					[
						'name'  => 'additional_information',
						'title' => esc_html__( 'Additional Information', 'powerpack' ),
					],
				],
				'title_field'        => '
					<#
						var t = "";

						if ( "" !== title ) {
							t = title;
						} else {
							t = name.replace( /_/g, " " ).toUpperCase();
						}
					#>{{{ t }}}
				',
				'frontend_available' => true,
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Register Content Tab - Layout Section controls.
	 *
	 * Registers Layout section controls under the Content Tab.
	 *
	 * @access protected
	 */
	protected function register_content_layout_controls() {

		$this->start_controls_section(
			'woo-products-tabs__section-layout',
			[
				'label' => esc_html__( 'Layout', 'powerpack' ),
			]
		);

		$this->add_control(
			'woo_product_tabs__tab_layout',
			[
				'label'              => esc_html__( 'Tab Layout', 'powerpack' ),
				'type'               => Controls_Manager::SELECT,
				'options'            => [
					'wpt-horizontal' => esc_html__( 'Horizontal', 'powerpack' ),
					'wpt-vertical'   => esc_html__( 'Vertical', 'powerpack' ),
				],
				'default'            => 'wpt-horizontal',
				'frontend_available' => true,
			]
		);

		$this->add_responsive_control(
			'woo-product-tabs__tab-position-horizontal',
			[
				'label'     => esc_html__( 'Tab Position', 'powerpack' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => [
					'column'         => [
						'title' => esc_html__( 'Top', 'powerpack' ),
						'icon'  => 'eicon-v-align-top',
					],
					'column-reverse' => [
						'title' => esc_html__( 'Bottom', 'powerpack' ),
						'icon'  => 'eicon-v-align-bottom',
					],
				],
				'default'   => 'column',
				'selectors' => [
					'{{WRAPPER}} div.pp-woo-product-tabs-wrapper div.woocommerce-tabs.wc-tabs-wrapper.wpt-horizontal' => 'flex-direction: {{VALUE}};',
				],
				'condition' => [
					'woo_product_tabs__tab_layout' => 'wpt-horizontal',
				],
			]
		);

		$this->add_responsive_control(
			'woo-product-tabs__tab-position-vertical',
			[
				'label'     => esc_html__( 'Tab Position', 'powerpack' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => [
					'row'         => [
						'title' => esc_html__( 'Left', 'powerpack' ),
						'icon'  => 'eicon-h-align-left',
					],
					'row-reverse' => [
						'title' => esc_html__( 'Right', 'powerpack' ),
						'icon'  => 'eicon-h-align-right',
					],
				],
				'default'   => 'row',
				'selectors' => [
					'{{WRAPPER}} div.pp-woo-product-tabs-wrapper div.woocommerce-tabs.wc-tabs-wrapper.wpt-vertical' => 'flex-direction: {{VALUE}};',
				],
				'condition' => [
					'woo_product_tabs__tab_layout' => 'wpt-vertical',
				],
			]
		);

		$this->add_responsive_control(
			'woo-products-tabs__panel-width',
			[
				'label'      => esc_html__( 'Content Panel Width', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'range'      => [
					'px' => [
						'min' => 0,
						'max' => 1000,
					],
				],
				'default'    => [
					'unit' => '%',
					'size' => 80,
				],
				'selectors'  => [
					'{{WRAPPER}} .wc-tabs.tabs' => 'width: {{SIZE}}{{UNIT}};',
				],
				'condition'  => [
					'woo_product_tabs__tab_layout' => 'wpt-vertical',
				],
			]
		);

		$this->add_control(
			'woo-product-tabs__tab-style',
			[
				'label'              => esc_html__( 'Tab Style', 'powerpack' ),
				'type'               => Controls_Manager::SELECT,
				'options'            => [
					'title'      => esc_html__( 'Title', 'powerpack' ),
					'icon'       => esc_html__( 'Icon', 'powerpack' ),
					'icon_title' => esc_html__( 'Icon + Title', 'powerpack' ),
				],
				'default'            => 'icon_title',
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'woo-product-tabs__active-tab-indicator-section',
			[
				'label'       => esc_html__( 'Active Tab Indicator', 'powerpack' ),
				'type'        => Controls_Manager::HEADING,
				'description' => esc_html__( 'Set the active and hover tab indicator for the tabs.', 'powerpack' ),
				'separator'   => 'before',
			]
		);

		$this->add_control(
			'woo_products_tab__active_tab_indicator_horizontal',
			[
				'label'              => esc_html__( 'Active Tab Indicator', 'powerpack' ),
				'type'               => Controls_Manager::SELECT,
				'options'            => [
					'none'      => esc_html__( 'None', 'powerpack' ),
					'underline' => esc_html__( 'Underline', 'powerpack' ),
					'icon'      => esc_html__( 'Icon', 'powerpack' ),
					'border'    => esc_html__( 'Border', 'powerpack' ),
				],
				'default'            => 'underline',
				'frontend_available' => true,
				'condition'          => [
					'woo_product_tabs__tab_layout' => 'wpt-horizontal',
				],
			]
		);

		$this->add_control(
			'woo_products_tab__active_tab_indicator_vertical',
			[
				'label'              => esc_html__( 'Active Tab Indicator', 'powerpack' ),
				'type'               => Controls_Manager::SELECT,
				'options'            => [
					'none'   => esc_html__( 'None', 'powerpack' ),
					'icon'   => esc_html__( 'Icon', 'powerpack' ),
					'border' => esc_html__( 'Border', 'powerpack' ),
				],
				'default'            => 'border',
				'frontend_available' => true,
				'condition'          => [
					'woo_product_tabs__tab_layout' => 'wpt-vertical',
				],
			]
		);

		$this->add_control(
			'woo-products-tab__active-tab-indicator-position-horizontal',
			[
				'label'              => esc_html__( 'Position', 'powerpack' ),
				'type'               => Controls_Manager::SELECT,
				'options'            => [
					'indicator-top'    => esc_html__( 'Top', 'powerpack' ),
					'indicator-bottom' => esc_html__( 'Bottom', 'powerpack' ),
				],
				'default'            => 'indicator-bottom',
				'frontend_available' => true,
				'condition'          => [
					'woo_product_tabs__tab_layout' => 'wpt-horizontal',
				],
			]
		);

		$this->add_control(
			'woo_products_tab__active_tab_indicator_position_vertical',
			[
				'label'              => esc_html__( 'Position', 'powerpack' ),
				'type'               => Controls_Manager::SELECT,
				'options'            => [
					'indicator-right' => esc_html__( 'Right', 'powerpack' ),
					'indicator-left'  => esc_html__( 'Left', 'powerpack' ),
				],
				'default'            => 'indicator-right',
				'frontend_available' => true,
				'condition'          => [
					'woo_product_tabs__tab_layout' => 'wpt-vertical',
					'woo_products_tab__active_tab_indicator_vertical' => 'icon',
				],
			]
		);

		/**
		 * Start - Normal and Hover Tab section for Active Icon Indicator - Border
		 */

		$this->start_controls_tabs(
			'acitve_tab_indicator__border',
			[
				'conditions' => [
					'relation' => 'or',
					'terms'    => [
						[
							'relation' => 'and',
							'terms'    => [
								[
									'name'     => 'woo_products_tab__active_tab_indicator_horizontal',
									'operator' => '==',
									'value'    => 'border',
								],
								[
									'name'     => 'woo_product_tabs__tab_layout',
									'operator' => '==',
									'value'    => 'wpt-horizontal',
								],
							],
						],
						[
							'relation' => 'and',
							'terms'    => [
								[
									'name'     => 'woo_products_tab__active_tab_indicator_vertical',
									'operator' => '==',
									'value'    => 'border',
								],
								[
									'name'     => 'woo_product_tabs__tab_layout',
									'operator' => '==',
									'value'    => 'wpt-vertical',
								],
							],
						],
					],
				],
			]
		);

		$this->start_controls_tab(
			'active-tab-indicator__border-normal',
			[
				'label' => esc_html__( 'Normal', 'powerpack' ),
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'      => 'woo-product-tabs__active-tab-indicator-border-normal',
				'label'     => esc_html__( 'Border', 'powerpack' ),
				'selector'  => '{{WRAPPER}} .woocommerce-tabs ul.tabs.wc-tabs li a',
				'separator' => 'before',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'active-tab-indicator__border-active',
			[
				'label' => esc_html__( 'Hover/Active', 'powerpack' ),
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'      => 'woo-product-tabs__active-tab-indicator-border-active',
				'label'     => esc_html__( 'Border', 'powerpack' ),
				'selector'  => '{{WRAPPER}} .woocommerce-tabs ul.tabs.wc-tabs li.active a,
								{{WRAPPER}} .woocommece-tabs ul.tabs.wc-tabs li.hover a',
				'separator' => 'before',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs(); // End Tab section for Active Icon Indicator Border

		$this->end_controls_section();

	}

	/**
	 * Register Content Tab - Other Section controls.
	 *
	 * Registers Other controls under the Content Tab.
	 *
	 * @access protected
	 */
	protected function register_content_other_controls() {

		$this->start_controls_section(
			'woo-product-tabs__section-other-controls',
			[
				'label' => esc_html__( 'Other', 'powerpack' ),
			]
		);

		$this->add_control(
			'woo-product-tabs__default-tab',
			[
				'label'              => esc_html__( 'Default Active Tab Index', 'powerpack' ),
				'type'               => Controls_Manager::NUMBER,
				'label_block'        => false,
				'default'            => 1,
				'placeholder'        => esc_html__( 'Default Active Tab Index', 'powerpack' ),
				'frontend_available' => true,
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Register Style Tab Controls.
	 *
	 * Registers controls for sections under the Style Tab.
	 *
	 * @access protected
	 */
	protected function register_style_controls() {

		$this->register_tab_style_controls();
		$this->register_indicator_style_controls();
		$this->register_title_style_controls();
		$this->register_content_style_controls();

	}

	/**
	 * Register Style Tab - Tab Style Section controls.
	 *
	 * Registers Tab Style section controls under the Style Tab.
	 *
	 * @access protected
	 */
	protected function register_tab_style_controls() {

		/**
		 * Style Tab: Tabs
		 */
		$this->start_controls_section(
			'woo-products-tab__tab-style',
			[
				'label' => esc_html__( 'Tabs', 'powerpack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'product_tab_horizontal_alignment',
			[
				'label'     => esc_html__( 'Horizontal Alignment', 'powerpack' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => [
					'flex-start' => [
						'title' => esc_html__( 'Left', 'powerpack' ),
						'icon'  => 'eicon-h-align-left',
					],
					'center'     => [
						'title' => esc_html__( 'Center', 'powerpack' ),
						'icon'  => 'eicon-h-align-center',
					],
					'flex-end'   => [
						'title' => esc_html__( 'Right', 'powerpack' ),
						'icon'  => 'eicon-h-align-right',
					],
				],
				'default'   => 'center',
				'selectors' => [
					'{{WRAPPER}} div.pp-woo-product-tabs-wrapper div.woocommerce-tabs.wc-tabs-wrapper.wpt-horizontal ul.tabs.wc-tabs' => 'justify-content: {{VALUE}};',
				],
				'condition' => [
					'woo_product_tabs__tab_layout' => 'wpt-horizontal',
				],
			]
		);

		$this->add_responsive_control(
			'product_tab_vertical_alignment',
			[
				'label'     => esc_html__( 'Vertical Alignment', 'powerpack' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => [
					'flex-start' => [
						'title' => esc_html__( 'Top', 'powerpack' ),
						'icon'  => 'eicon-v-align-top',
					],
					'center'     => [
						'title' => esc_html__( 'Middle', 'powerpack' ),
						'icon'  => 'eicon-v-align-middle',
					],
					'flex-end'   => [
						'title' => esc_html__( 'Bottom', 'powerpack' ),
						'icon'  => 'eicon-v-align-bottom',
					],
				],
				'default'   => 'center',
				'selectors' => [
					'{{WRAPPER}} div.pp-woo-product-tabs-wrapper div.woocommerce-tabs.wc-tabs-wrapper.wpt-vertical ul.tabs.wc-tabs' => 'justify-content: {{VALUE}};',
				],
				'condition' => [
					'woo_product_tabs__tab_layout' => 'wpt-vertical',
				],
			]
		);

		$this->add_responsive_control(
			'woo-product-tabs_tab-spacing',
			[
				'label'      => esc_html__( 'Space Between Tabs', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'default'    => [
					'size' => 0,
				],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 500,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs.wpt-horizontal .wc-tabs li:not(:last-child)' => 'margin-inline-end: {{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs.wpt-vertical .wc-tabs li:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}}',
				],
			]
		);

		$this->add_responsive_control(
			'woo-product-tabs__tab-panel-space-top',
			[
				'label'      => esc_html__( 'Space Between Tabs & Panel', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'default'    => [
					'size' => 0,
				],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 100,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs.wpt-horizontal .tabs.wc-tabs' => 'margin-bottom: {{SIZE}}{{UNIT}}',
				],
				'separator'  => 'after',
				'condition'  => [
					'woo-product-tabs__tab-position-horizontal' => 'column',
					'woo_product_tabs__tab_layout' => 'wpt-horizontal',
				],
			]
		);

		$this->add_responsive_control(
			'woo-product-tabs__tab-panel-space-bottom',
			[
				'label'      => esc_html__( 'Space Between Tabs & Panel', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'default'    => [
					'size' => 0,
				],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 100,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs.wpt-horizontal .tabs.wc-tabs' => 'margin-top: {{SIZE}}{{UNIT}}',
				],
				'condition'  => [
					'woo-product-tabs__tab-position-horizontal' => 'column-reverse',
					'woo_product_tabs__tab_layout' => 'wpt-horizontal',
				],
			]
		);

		$this->add_responsive_control(
			'woo-product-tabs__tab-panel-space-left',
			[
				'label'      => esc_html__( 'Space Between Tabs & Panel', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'default'    => [
					'size' => 0,
				],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 100,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs.wpt-vertical .tabs.wc-tabs' => 'margin-inline-end: {{SIZE}}{{UNIT}}',
				],
				'condition'  => [
					'woo-product-tabs__tab-position-vertical' => 'row',
					'woo_product_tabs__tab_layout' => 'wpt-vertical',
				],
			]
		);

		$this->add_responsive_control(
			'woo-product-tabs__tab-panel-space-right',
			[
				'label'      => esc_html__( 'Space Between Tabs & Panel', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'default'    => [
					'size' => 0,
				],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 100,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs.wpt-vertical .tabs.wc-tabs' => 'margin-inline-start: {{SIZE}}{{UNIT}}',
				],
				'condition'  => [
					'woo-product-tabs__tab-position-vertical' => 'row-reverse',
					'woo_product_tabs__tab_layout' => 'wpt-vertical',
				],
			]
		);

		$this->add_control(
			'woo_product_tabs_tab_size_toggle',
			[
				'label'        => esc_html__( 'Size', 'powerpack' ),
				'type'         => Controls_Manager::SWITCHER,
				'return_value' => 'yes',
				'default'      => '',
				'separator'    => 'before',
			]
		);

		$this->add_responsive_control(
			'woo_product_tabs_tab_width',
			[
				'label'      => esc_html__( 'Width', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'default'    => [
					'size' => 200,
				],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 300,
						'step' => 20,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs.wpt-horizontal .tabs.wc-tabs li a' => 'width: {{SIZE}}{{UNIT}}',
				],
				'condition'  => [
					'woo_product_tabs_tab_size_toggle' => 'yes',
				],
			]
		);

		$this->add_responsive_control(
			'woo_product_tabs_tab_height',
			[
				'label'      => esc_html__( 'Height', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'default'    => [
					'size' => 60,
				],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 300,
						'step' => 20,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs.wpt-horizontal .tabs.wc-tabs li a' => 'height: {{SIZE}}{{UNIT}}',
				],
				'condition'  => [
					'woo_product_tabs_tab_size_toggle' => 'yes',
				],
			]
		);

		$this->add_control(
			'woo-product-tabs__content-alignment-heading',
			[
				'label'     => esc_html__( 'Content Alignment', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_responsive_control(
			'woo-product-tabs__tab-content-alignment-top-bottom',
			[
				'label'     => esc_html__( 'Horizontal', 'powerpack' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => [
					'flex-start' => [
						'title' => esc_html__( 'Left', 'powerpack' ),
						'icon'  => 'eicon-h-align-left',
					],
					'center'     => [
						'title' => esc_html__( 'Center', 'powerpack' ),
						'icon'  => 'eicon-h-align-center',
					],
					'flex-end'   => [
						'title' => esc_html__( 'Right', 'powerpack' ),
						'icon'  => 'eicon-h-align-right',
					],
				],
				'default'   => 'center',
				'selectors' => [
					'{{WRAPPER}} .wc-tabs.row li a, {{WRAPPER}} .wc-tabs.row-reverse li a' => 'justify-content: {{VALUE}};',
					'{{WRAPPER}} .wc-tabs.column li a, {{WRAPPER}} .wc-tabs.column-reverse li a' => 'align-items: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'woo-product-tabs__tab-content-alignment-left-right',
			[
				'label'     => esc_html__( 'Vertical', 'powerpack' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => [
					'flex-start' => [
						'title' => esc_html__( 'Top', 'powerpack' ),
						'icon'  => 'eicon-v-align-top',
					],
					'center'     => [
						'title' => esc_html__( 'Middle', 'powerpack' ),
						'icon'  => 'eicon-v-align-middle',
					],
					'flex-end'   => [
						'title' => esc_html__( 'Bottom', 'powerpack' ),
						'icon'  => 'eicon-v-align-bottom',
					],
				],
				'default'   => 'center',
				// Mirror of the Horizontal control above: the cross axis on a row, the main axis on a column.
				'selectors' => [
					'{{WRAPPER}} .wc-tabs.row li a, {{WRAPPER}} .wc-tabs.row-reverse li a' => 'align-items: {{VALUE}};',
					'{{WRAPPER}} .wc-tabs.column li a, {{WRAPPER}} .wc-tabs.column-reverse li a' => 'justify-content: {{VALUE}};',
				],
				'separator' => 'after',
			]
		);

		$this->end_controls_section();

	}

	/**
	 * Register Style Tab - Active Tab Indicator Style Section controls.
	 *
	 * Registers Active Tab Indicator Style section controls under the Style Tab.
	 *
	 * @access protected
	 */
	protected function register_indicator_style_controls() {

		/*
		 * The size controls below were all conditioned on
		 * 'woo-products-tab__active-tab-indicator', which is not a control that
		 * exists - the real ones are split per layout and spelled with underscores.
		 * Elementor drops a condition on an unknown key silently, so the whole
		 * sizing half of this section could never appear in the panel.
		 *
		 * Underline is only offered on the horizontal layout, so it needs no 'or';
		 * icon is offered on both, so it does.
		 */
		$icon_indicator = [
			'relation' => 'or',
			'terms'    => [
				[
					'relation' => 'and',
					'terms'    => [
						[
							'name'     => 'woo_product_tabs__tab_layout',
							'operator' => '==',
							'value'    => 'wpt-horizontal',
						],
						[
							'name'     => 'woo_products_tab__active_tab_indicator_horizontal',
							'operator' => '==',
							'value'    => 'icon',
						],
					],
				],
				[
					'relation' => 'and',
					'terms'    => [
						[
							'name'     => 'woo_product_tabs__tab_layout',
							'operator' => '==',
							'value'    => 'wpt-vertical',
						],
						[
							'name'     => 'woo_products_tab__active_tab_indicator_vertical',
							'operator' => '==',
							'value'    => 'icon',
						],
					],
				],
			],
		];

		$underline_indicator = [
			'woo_product_tabs__tab_layout'                      => 'wpt-horizontal',
			'woo_products_tab__active_tab_indicator_horizontal' => 'underline',
		];

		$this->start_controls_section(
			'woo-products-tab__indicator-style-section',
			[
				'label' => esc_html__( 'Indicator', 'powerpack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->start_controls_tabs( 'woo-product-tabs__indicator-style' );

		$this->start_controls_tab(
			'indicator-style-normal',
			[
				'label' => esc_html__( 'Normal', 'powerpack' ),
			]
		);

		$this->add_control(
			'woo-products-tab_indicator-size',
			[
				'label'      => esc_html__( 'Size', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon li.active::after' => 'font-size: {{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon li.active::before' => 'font-size: {{SIZE}}{{UNIT}}',
				],
				'conditions' => $icon_indicator,
			]
		);

		$this->add_control(
			'woo-products-tab_indicator-height',
			[
				'label'      => esc_html__( 'Height', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.active::before' => 'height: {{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.active::after' => 'height: {{SIZE}}{{UNIT}}',
				],
				'condition'  => $underline_indicator,
			]
		);

		$this->add_control(
			'woo-products-tab_indicator-width',
			[
				'label'      => esc_html__( 'Width', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'range'      => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
					'%'  => [
						'min' => 0,
						'max' => 100,
					],
					'vw' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default'    => [
					'unit' => '%',
					'size' => 100,
				],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.active::before' => 'width: {{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.active::after' => 'width: {{SIZE}}{{UNIT}}',
				],
				'condition'  => $underline_indicator,
			]
		);

		$this->add_control(
			'woo-product-tabs__indicator-spacing',
			[
				'label'      => esc_html__( 'Spacing', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon.indicator-bottom li.active::after' => 'bottom: -{{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon.indicator-top li.active::before' => 'top: -{{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.active::after' => 'bottom: -{{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.active::before' => 'top: -{{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon.indicator-left li.active::before' => 'left: -{{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon.indicator-right li.active::after' => 'right: -{{SIZE}}{{UNIT}}',
				],
			]
		);

		$this->add_control(
			'woo-products-tab_indicator-color',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#808080',
				'selectors' => [
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon li::before' => 'color: {{VALUE}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon li::after' => 'color: {{VALUE}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li::before' => 'background-color: {{VALUE}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li::after' => 'background-color: {{VALUE}}',
				],
			]
		);

		$this->end_controls_tab(); // End normal indicator style

		$this->start_controls_tab(
			'indicator-style-active',
			[
				'label' => esc_html__( 'Hover', 'powerpack' ),
			]
		);

		$this->add_control(
			'woo-products-tab_indicator-size-hover',
			[
				'label'      => esc_html__( 'Size', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon li.hover::after' => 'font-size: {{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon li.hover::before' => 'font-size: {{SIZE}}{{UNIT}}',
				],
				'conditions' => $icon_indicator,
			]
		);

		$this->add_control(
			'woo-products-tab_indicator-height-hover',
			[
				'label'      => esc_html__( 'Height', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.hover::before' => 'height: {{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.hover::after' => 'height: {{SIZE}}{{UNIT}}',
				],
				'condition'  => $underline_indicator,
			]
		);

		$this->add_control(
			'woo-products-tab_indicator-width-hover',
			[
				'label'      => esc_html__( 'Width', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'range'      => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
					'%'  => [
						'min' => 0,
						'max' => 100,
					],
					'vw' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default'    => [
					'unit' => '%',
					'size' => 100,
				],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.hover::before' => 'width: {{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.hover::after' => 'width: {{SIZE}}{{UNIT}}',
				],
				'condition'  => $underline_indicator,
			]
		);

		$this->add_control(
			'woo-product-tabs__indicator-spacing-hover',
			[
				'label'      => esc_html__( 'Spacing', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon.indicator-bottom li.hover::after' => 'bottom: -{{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon.indicator-top li.hover::before' => 'top: -{{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.hover::after' => 'bottom: -{{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.hover::before' => 'top: -{{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon.indicator-left li.hover::before' => 'left: -{{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon.indicator-right li.hover::after' => 'right: -{{SIZE}}{{UNIT}}',
				],
			]
		);

		$this->add_control(
			'woo-products-tab_indicator-color-hover',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#808080',
				'selectors' => [
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon li.hover::before' => 'color: {{VALUE}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon li.hover::after' => 'color: {{VALUE}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.hover::before' => 'background-color: {{VALUE}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.hover::after' => 'background-color: {{VALUE}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon li.active::before' => 'color: {{VALUE}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.icon li.active::after' => 'color: {{VALUE}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.active::before' => 'background-color: {{VALUE}}',
					'{{WRAPPER}} .woocommerce-tabs ul.tabs.underline li.active::after' => 'background-color: {{VALUE}}',
				],
			]
		);

		$this->end_controls_tab(); // End Hover styles

		$this->end_controls_tabs(); // End Indicator style tabs

		$this->end_controls_section();

	}

	/**
	 * Register Style Tab - Title Section controls.
	 *
	 * Registers Title Style section controls under the Style Tab.
	 *
	 * @access protected
	 */
	protected function register_title_style_controls() {

		$this->start_controls_section(
			'woo-products-tab__title-style',
			[
				'label' => esc_html__( 'Title', 'powerpack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'woo-products-tab__title-typography',
				'selector' => '
					{{WRAPPER}} .wc-tabs li a',
			]
		);

		$this->add_control(
			'woo-product-tabs__icon-position',
			[
				'label'              => esc_html__( 'Icon Position', 'powerpack' ),
				'type'               => Controls_Manager::SELECT,
				'options'            => [
					'column'         => esc_html__( 'Top', 'powerpack' ),
					'column-reverse' => esc_html__( 'Bottom', 'powerpack' ),
					'row'            => esc_html__( 'Left', 'powerpack' ),
					'row-reverse'    => esc_html__( 'Right', 'powerpack' ),
				],
				'default'            => 'row',
				'frontend_available' => true,
			]
		);

		$this->add_responsive_control(
			'woo-product-tabs__icon-size',
			[
				'label'      => esc_html__( 'Icon Size', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'default'    => [
					'size' => 15,
				],
				'range'      => [
					'px' => [
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .wc-tabs li a .pp-icon' => 'font-size: {{SIZE}}{{UNIT}}',
				],
			]
		);

		$this->add_responsive_control(
			'woo-product-tabs__icon-spacing',
			[
				'label'      => esc_html__( 'Spacing', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'default'    => [
					'size' => 10,
				],
				'range'      => [
					'px' => [
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .wc-tabs.row li a .pp-icon' => 'margin-inline-end: {{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .wc-tabs.column li a .pp-icon' => 'margin-bottom: {{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .wc-tabs.row-reverse li a .pp-icon' => 'margin-inline-start: {{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .wc-tabs.column-reverse li a .pp-icon' => 'margin-top: {{SIZE}}{{UNIT}}',
				],
			]
		);

		$this->start_controls_tabs( 'woo-product-tabs__title-style' );

		$this->start_controls_tab(
			'tab_title-normal',
			[
				'label' => esc_html__( 'Normal', 'powerpack' ),
			]
		);

		$this->add_control(
			'woo-products-tab__title-color',
			[
				'label'     => esc_html__( 'Title Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#808080',
				'selectors' => [
					'{{WRAPPER}} .woocommerce-tabs .tabs.wc-tabs li a' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'woo-products-tab__title-bg-color',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .woocommerce-tabs .wc-tabs li a' => 'background-color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'woo-products-tab__icon-color',
			[
				'label'     => esc_html__( 'Icon Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#808080',
				'selectors' => [
					'{{WRAPPER}} .wc-tabs li a .pp-icon' => 'color: {{VALUE}}',
					'{{WRAPPER}} .wc-tabs li a svg'      => 'fill: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'woo-product-tabs__tab-box-shadow',
				'label'    => esc_html__( 'Box Shadow', 'powerpack' ),
				'selector' => '{{WRAPPER}} .wc-tabs li a',
			]
		);

		$this->end_controls_tab(); // End Normal Tab

		$this->start_controls_tab(
			'tab_title-active',
			[
				'label' => esc_html__( 'Hover / Active', 'powerpack' ),
			]
		);

		$this->add_control(
			'woo-products-tab__title-color-active',
			[
				'label'     => esc_html__( 'Title Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .woocommerce-tabs .tabs.wc-tabs li.active a' => 'color: {{VALUE}}',
					'{{WRAPPER}} .woocommerce-tabs .tabs.wc-tabs li a:hover' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'woo-products-tab__title-bg-color-active',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#000000',
				'selectors' => [
					'{{WRAPPER}} .woocommerce-tabs .wc-tabs li.active a' => 'background-color: {{VALUE}}',
					'{{WRAPPER}} .woocommerce-tabs .wc-tabs li a:hover' => 'background-color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'woo-products-tab__icon-color-active',
			[
				'label'     => esc_html__( 'Icon Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#000000',
				'selectors' => [
					'{{WRAPPER}} .wc-tabs li.active a .pp-icon' => 'color: {{VALUE}}',
					'{{WRAPPER}} .wc-tabs li.active a svg' => 'fill: {{VALUE}}',
					'{{WRAPPER}} .wc-tabs li a:hover .pp-icon' => 'color: {{VALUE}}',
					'{{WRAPPER}} .wc-tabs li a:hover svg'  => 'fill: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'woo-products-tab__tab-border-color-active',
			[
				'label'     => esc_html__( 'Border Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#000000',
				'selectors' => [
					'{{WRAPPER}} div.woocommerce-tabs ul.wc-tabs li.active a' => 'border-color: {{VALUE}}',
					'{{WRAPPER}} div.woocommerce-tabs ul.wc-tabs li.hover a:hover' => 'border-color: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'woo-product-tabs__tab-box-shadow-active',
				'label'    => esc_html__( 'Box Shadow', 'powerpack' ),
				'selector' => '{{WRAPPER}} .wc-tabs li a:hover,
								{{WRAPPER}} .wc-tabs li a:active',
			]
		);

		$this->end_controls_tab(); // End Hover Tab

		$this->end_controls_tabs(); // End Controls Tab

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'      => 'woo-product-tabs__tab-border',
				'label'     => esc_html__( 'Border', 'powerpack' ),
				'selector'  => '{{WRAPPER}} .woocommerce-tabs ul.tabs.wc-tabs li a',
				'separator' => 'before',
			]
		);

		$this->add_control(
			'woo-product-tabs__tab-border-radius',
			[
				'label'      => esc_html__( 'Border Radius', 'powerpack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'default'    => [
					'top'    => 0,
					'bottom' => 0,
					'left'   => 0,
					'right'  => 0,
				],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs ul.wc-tabs li a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'woo-products-tab__tab-padding',
			[
				'label'      => esc_html__( 'Padding', 'powerpack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'default'    => [
					'top'    => 10,
					'bottom' => 10,
					'left'   => 10,
					'right'  => 10,
				],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs .wc-tabs li a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator'  => 'before',
			]
		);

		$this->end_controls_section();

	}

	/**
	 * Register Style Tab - Tab Content Section controls.
	 *
	 * Registers Content Style section controls under the Style Tab.
	 *
	 * @access protected
	 */
	protected function register_content_style_controls() {

		$this->start_controls_section(
			'woo-products-tab__content-style',
			[
				'label' => esc_html__( 'Content', 'powerpack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'woo-product-tabs__content-align',
			[
				'label'     => esc_html__( 'Alignment', 'powerpack' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => [
					'start'  => [
						'title' => esc_html__( 'Left', 'powerpack' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'powerpack' ),
						'icon'  => 'eicon-text-align-center',
					],
					'end'    => [
						'title' => esc_html__( 'Right', 'powerpack' ),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'default'   => 'center',
				'separator' => 'after',
				'selectors' => [
					'{{WRAPPER}} div.pp-woo-product-tabs-wrapper div.woocommerce-tabs div.woocommerce-Tabs-panel.panel.wc-tab' => 'text-align: {{VALUE}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'woo-product-tabs__content-background',
				'label'    => esc_html__( 'Background', 'powerpack' ),
				'types'    => [ 'none', 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} div.pp-woo-product-tabs-wrapper div.woocommerce-tabs div.woocommerce-Tabs-panel.panel.wc-tab',
			]
		);
		$this->add_control(
			'woo-product-tabs__text-color',
			[
				'label'     => esc_html__( 'Text Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#808080',
				'separator' => 'before',
				'selectors' => [
					'{{WRAPPER}} div.pp-woo-product-tabs-wrapper div.woocommerce-tabs div.woocommerce-Tabs-panel.panel.wc-tab,
					{{WRAPPER}} div.pp-woo-product-tabs-wrapper div.woocommerce-tabs div.woocommerce-Tabs-panel.panel.wc-tab h2,
					{{WRAPPER}} div.pp-woo-product-tabs-wrapper div.woocommerce-tabs div.woocommerce-Tabs-panel.panel.wc-tab h3,
					{{WRAPPER}} div.pp-woo-product-tabs-wrapper div.woocommerce-tabs div.woocommerce-Tabs-panel.panel.wc-tab h4,
					{{WRAPPER}} div.pp-woo-product-tabs-wrapper div.woocommerce-tabs div.woocommerce-Tabs-panel.panel.wc-tab h5,
					{{WRAPPER}} div.pp-woo-product-tabs-wrapper div.woocommerce-tabs div.woocommerce-Tabs-panel.panel.wc-tab span,
					{{WRAPPER}} div.pp-woo-product-tabs-wrapper div.woocommerce-tabs div.woocommerce-Tabs-panel.panel.wc-tab p' => 'color: {{VALUE}}',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'woo-product-tabs__content-typography',
				'label'    => esc_html__( 'Text Typography', 'powerpack' ),
				'global'                => [
					'default' => Global_Typography::TYPOGRAPHY_ACCENT,
				],
				'selector' => '{{WRAPPER}} div.pp-woo-product-tabs-wrapper div.woocommerce-tabs div.woocommerce-Tabs-panel.panel.wc-tab',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'woo-product-tabs__tab-content-border',
				'label'    => esc_html__( 'Border', 'powerpack' ),
				'selector' => '{{WRAPPER}} .woocommerce-tabs .woocommerce-Tabs-panel.panel.wc-tab',
			]
		);

		$this->add_control(
			'woo-product-tabs__content-border-radius',
			[
				'label'      => esc_html__( 'Border Radius', 'powerpack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'separator'  => 'before',
				'default'    => [
					'top'    => 0,
					'bottom' => 0,
					'left'   => 0,
					'right'  => 0,
				],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs .woocommerce-Tabs-panel.panel.wc-tab' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_responsive_control(
			'woo-product-tabs__content-tab-padding',
			[
				'label'      => esc_html__( 'Padding', 'powerpack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'default'    => [
					'top'    => 10,
					'bottom' => 10,
					'left'   => 10,
					'right'  => 10,
				],
				'selectors'  => [
					'{{WRAPPER}} .woocommerce-tabs .woocommerce-Tabs-panel.panel.wc-tab' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'woo-product-tabs__content-box-shadow',
				'label'    => esc_html__( 'Box Shadow', 'powerpack' ),
				'selector' => '{{WRAPPER}} .woocommerce-tabs .panel.woocommerce-Tabs-panel',
			]
		);

		$this->end_controls_section();

	}

	/**
	 * Retrieve the repeater rows keyed by their row ID.
	 *
	 * Elementor already memoises get_settings_for_display(), so the repeated
	 * lookups were cheap; the cost was the linear scan each of the callers ran
	 * over every row. Keying the rows once turns those scans into direct hits,
	 * which matters because get_tab_name() is called once per tab and
	 * fill_content() once per custom tab.
	 *
	 * @since 3.0.0
	 *
	 * @return array Repeater rows keyed by '_id'.
	 */
	private function get_tab_items() {

		if ( null === $this->tab_items ) {
			$settings = $this->get_settings_for_display( 'product_tabs--repeater-section' );
			$items    = ! empty( $settings ) ? $settings : [];

			$this->tab_items = array_column( $items, null, '_id' );
		}

		return $this->tab_items;
	}

	/**
	 * Adds content to the custom tabs
	 *
	 * Add content to the custom tab based on the type of tab custom or saved_template
	 *
	 * @since 2.1.0
	 *
	 * @param string $id Slug of the tab.
	 *
	 * @return void
	 */
	public function fill_content( $id ) {

		$items = $this->get_tab_items();

		if ( ! isset( $items[ $id ] ) ) {
			return;
		}

		$item = $items[ $id ];

		// Process & Display the data.
		if ( 'custom' === $item['custom_tab_type'] ) {

			// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Editor-authored WYSIWYG content, parsed through the_content filters.
			echo $this->parse_text_editor( $item['custom_content'] );

		} elseif ( 'saved_template' === $item['custom_tab_type'] ) {

			if ( ! empty( $item['template_content'] ) ) {

				$template_id = absint( $item['template_content'] );

				/*
				 * The control only ever offers Source_Local::CPT posts, so hold the
				 * stored ID to that same contract. Without the post type check a
				 * stale ID - a template deleted and its ID reused by another post,
				 * or an import that remapped IDs - would render whatever post now
				 * owns that ID.
				 */
				if ( $template_id
					&& 'publish' === get_post_status( $template_id )
					&& Source_Local::CPT === get_post_type( $template_id ) ) {
					// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Rendered Elementor template markup.
					echo Plugin::$instance->frontend->get_builder_content_for_display( $template_id );
				}
			} else {

				esc_html_e( 'Please select a template.', 'powerpack' );
			}
		}
	}

	/**
	 * Fetch the Tab's Title
	 *
	 * @since 2.1.0
	 *
	 * @param string $tab slug of the tab.
	 *
	 * @return string $title Title of the Tab.
	 */
	protected function get_tab_title( $tab ) {

		global $product;

		$title = '';

		switch ( $tab ) {

			case 'description':
				$title = esc_html__( 'Description', 'powerpack' );
				break;
			case 'additional_information':
				$title = esc_html__( 'Additional Information', 'powerpack' );
				break;
			case 'reviews':
				$review_count = ( $product instanceof \WC_Product ) ? $product->get_review_count() : 0;
				/* translators: %d: Number of product reviews. */
				$title = sprintf( esc_html__( 'Reviews (%d)', 'powerpack' ), $review_count );
				break;
			default:
				$title = esc_html__( 'Custom Tab', 'powerpack' );
				break;
		}

		return $title;
	}

	/**
	 * Fetch the Tab's from repeater field
	 *
	 * @since 2.1.0
	 *
	 * @return array $new_tabs Array of Tabs.
	 */
	protected function get_tabs() {

		// Store Tabs.
		$new_tabs = [];

		/*
		 * Set a base priority to 10.
		 * Priority will increment with loop in order so that tabs are arranged automatically.
		 */
		$priority = 10;

		// Get tabs from repeater fields.
		foreach ( $this->get_tab_items() as $item ) {

			$new_tabs[ $item['_id'] ] = [
				'title'    => ! empty( $item['title'] ) ? $item['title'] : $this->get_tab_title( $item['name'] ),
				'priority' => $priority,
				'callback' => '',
			];

			$priority += 10;
		}

		// Return the updated tab list.
		return $new_tabs;
	}

	/**
	 * Fetch the Tab's slug name
	 *
	 * @since 2.1.0
	 *
	 * @param string $id slug of the id.
	 *
	 * @return string Slug of the Tab.
	 */
	protected function get_tab_name( $id ) {

		$items = $this->get_tab_items();

		return isset( $items[ $id ] ) ? $items[ $id ]['name'] : '';
	}

	/**
	 * Fetch the correct callback function for the tab
	 *
	 * @since 2.1.0
	 *
	 * @param string $id slug of the id.
	 *
	 * @return string|array|false Callback for the tab, or false if the row has no valid type.
	 */
	protected function get_callback_function( $id ) {

		$tab = $this->get_tab_name( $id );

		// Callback function.
		$callback = false;

		switch ( $tab ) {

			case 'description':
				$callback = 'woocommerce_product_description_tab';
				break;
			case 'additional_information':
				$callback = 'woocommerce_product_additional_information_tab';
				break;
			case 'reviews':
				$callback = 'comments_template';
				break;
			case 'custom':
				$callback = [ $this, 'fill_content' ];
				break;
		}

		return $callback;
	}

	/**
	 * Add the tabs to the WooCommerce global $tabs variable.
	 *
	 * The repeater is the source of truth for this widget, so the incoming list is
	 * replaced rather than appended to. That deliberately drops WooCommerce's
	 * default tabs and any a third party added; the 'pp_woo_product_tabs' filter
	 * below is the way back in for anything that needs to survive.
	 *
	 * @since 2.1.0
	 *
	 * @param array $tabs Array of tabs.
	 *
	 * @return array $tabs Modified array of tabs.
	 */
	public function add_tabs( $tabs ) {

		// Get the array of tabs from repeater field.
		$new_tabs = $this->get_tabs();

		if ( empty( $new_tabs ) ) {
			return $tabs;
		}

		// Add callback to each tab, dropping any row that resolves to no callback.
		foreach ( $new_tabs as $id => $item ) {
			$callback = $this->get_callback_function( $id );

			if ( ! $callback ) {
				unset( $new_tabs[ $id ] );
				continue;
			}

			$new_tabs[ $id ]['callback'] = $callback;
		}

		/**
		 * Filters the tab list built from the widget's repeater.
		 *
		 * Runs after the repeater rows have been turned into WooCommerce tab
		 * definitions and before they replace the existing list.
		 *
		 * @since 3.0.0
		 *
		 * @param array               $new_tabs Tabs built from the repeater.
		 * @param array               $tabs     The tab list being replaced.
		 * @param Woo_Product_Tabs    $widget   The widget instance.
		 */
		return apply_filters( 'pp_woo_product_tabs', $new_tabs, $tabs, $this );
	}

	/**
	 * Render a placeholder when there is no product to preview.
	 *
	 * Powerpack_Widget::render_editor_placeholder() is not used here because it is
	 * gated on is_edit_mode(), which is false inside the preview iframe - the one
	 * place the user would actually see this. The markup mirrors it so the shared
	 * editor.css styling still applies.
	 *
	 * @since 3.0.0
	 *
	 * @return void
	 */
	private function render_no_product_placeholder() {
		?>
		<div class="pp-editor-placeholder">
			<h4 class="pp-editor-placeholder-title">
				<?php echo esc_html( $this->get_title() ); ?>
			</h4>
			<div class="pp-editor-placeholder-content">
				<?php esc_html_e( 'No product is available to preview these tabs against. Publish a product, or choose a Single Product template under PowerPack > WooCommerce Builder so the editor can pick one.', 'powerpack' ); ?>
			</div>
		</div>
		<?php
	}

	/**
	 * Render the data on frontend.
	 *
	 * @since 2.1.0
	 *
	 * @return void
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();

		do_action( 'pp_woo_builder_widget_before_render', $this );

		global $product;

		$product = wc_get_product();

		/*
		 * is_edit_mode() covers the editor frame and Elementor's AJAX widget
		 * re-render, but not the preview iframe - that is a separate request
		 * identified by ?elementor-preview=, where is_edit_mode() is false. Gating
		 * on it alone meant the iframe fell through to the frontend path, found no
		 * product on an elementor_library template, and returned nothing at all.
		 *
		 * When PP_Woo_Builder_Preview is active it swaps in a real product before
		 * this point, so $product is set and the frontend path renders the genuine
		 * tabs. It only registers its hooks when a Single Product template has been
		 * assigned, which is why the preview can be empty; PP_Woo_Helper::default()
		 * falls back to the most recent product and covers that case.
		 */
		$is_editor = PP_Helper::is_edit_mode() || PP_Helper::is_preview_mode();

		if ( ! $is_editor && empty( $product ) ) {
			return;
		}

		/*
		 * The wrapper is emitted for both branches. It used to be opened only on the
		 * frontend - and never closed - so everything after the widget was parsed as
		 * its child and picked up the descendant rules below it, while the editor got
		 * no wrapper at all and so lost the eight style controls scoped through this
		 * class along with the flex layout itself.
		 */
		$this->add_render_attribute( 'wrapper', 'class', 'pp-woo-product-tabs-wrapper' );
		?>
		<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
			<?php
			if ( $is_editor ) {
				$preview = PP_Woo_Helper::get_instance()->default( $this->get_name(), $settings, $this );

				if ( '' === trim( (string) $preview ) ) {
					// default() returns an empty string when it cannot resolve a
					// product. Say so, rather than rendering an empty box.
					$this->render_no_product_placeholder();
				} else {
					/*
					 * Not escaped on purpose, matching woo-add-to-cart.php. This is
					 * WooCommerce core template output shown only to a user who already
					 * holds edit_posts, and wp_kses_post() strips form, input and select -
					 * which is the entire Reviews tab.
					 */
					// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- WooCommerce template output, editor preview only.
					echo $preview;
				}
			} else {
				add_filter( 'woocommerce_product_tabs', [ $this, 'add_tabs' ] );

				wc_get_template( 'single-product/tabs/tabs.php' );

				/*
				 * When the widget is rendered into an AJAX response - a quick view modal,
				 * for example - WooCommerce's single-product script has already run, so the
				 * freshly injected tabs need their init triggered by hand. Scope it to this
				 * instance: triggering init page-wide also resets every other tab component
				 * on the page back to its first panel.
				 *
				 * This does not run for Elementor's editor re-render. ajax_render_widget()
				 * calls set_edit_mode( true ), so that request takes the branch above.
				 */
				if ( wp_doing_ajax() ) {
					?>
					<script>
						jQuery( '.elementor-element-<?php echo esc_js( $this->get_id() ); ?>' )
							.find( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' )
							.trigger( 'init' );
					</script>
					<?php
				}

				// Remove filter.
				remove_filter( 'woocommerce_product_tabs', [ $this, 'add_tabs' ] );
			}
			?>
		</div>
		<?php

		do_action( 'pp_woo_builder_widget_after_render', $this );
	}
}
