<?php
namespace EcafeAddons\Widgets;

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

use EcafeAddons\EcafeElementLoad;

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

class Ecafe_Manual_Comparison_Table extends Widget_Base {

	public function get_name() {
		return 'ecafe-manual-comparison-table';
	}

	public function get_title() {
		return esc_html__( 'Manual Comparison Table', 'essential-classy-addons-for-elementor' );
	}

	public function get_icon() {
		return 'ecafe-ele-back-icon ecafe-manual-comparison-table-icon';
	}

	public function get_categories() {
		return array( 'essential' );
	}

	public function get_keywords() {
		return array( 'manual comparison table' );
	}

	public function get_custom_help_url() {
		return 'https://store.kapasias.com/helpdesk/';
	}

	protected function register_controls() {
		$this->start_controls_section(
			'sectioncolumns',
			array(
				'label' => esc_html__( 'Columns', 'essential-classy-addons-for-elementor' ),
			)
		);
		$columns = new \Elementor\Repeater();
		$columns->add_control(
			'columntitle',
			array(
				'label'   => esc_html__( 'Column Title', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::TEXT,
				'default' => esc_html__( 'Basic', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),
			)
		);
		$columns->add_control(
			'columnMediaType',
			array(
				'label'   => esc_html__( 'Media Type', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'icon',
				'options' => array(
					'icon'  => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
					'image' => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
					'none'  => esc_html__( 'None', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$columns->add_control(
			'columnIcon',
			array(
				'label'     => esc_html__( 'Column Icon', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::ICONS,
				'condition' => array(
					'columnMediaType' => 'icon',
				),
			)
		);
		$columns->add_control(
			'columnImage',
			array(
				'label'     => esc_html__( 'Column Image', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::MEDIA,
				'dynamic'    => array(
					'active' => true,
				),
				'condition' => array(
					'columnMediaType' => 'image',
				),
			)
		);
		$columns->add_control(
			'highlight',
			array(
				'label'        => esc_html__( 'Highlight Column', 'essential-classy-addons-for-elementor' ),
				'type'         => Controls_Manager::SWITCHER,
				'return_value' => 'yes',
			)
		);
		$this->add_control(
			'columns',
			array(
				'label'       => esc_html__( 'Columns', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $columns->get_controls(),
				'default'     => array(
					array( 'columntitle' => 'Basic' ),
					array( 'columntitle' => 'Pro' ),
				),
				'title_field' => '{{{ columntitle }}}',
			)
		);
		$this->add_control(
			'enableEqualWidth',
			array(
				'label'        => esc_html__( 'Equal Width', 'essential-classy-addons-for-elementor' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => 'Yes',
				'label_off'    => 'No',
				'return_value' => 'yes',
				'default'      => 'no',
				'separator'    => 'before',
			)
		);
		$this->add_responsive_control(
			'thTdVAlign',
			array(
				'label'     => esc_html__( 'TH/TD Vertical Align', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'top'    => array(
						'title' => esc_html__( 'Top', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'middle' => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'bottom' => array(
						'title' => esc_html__( 'Bottom', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} table th,{{WRAPPER}} table td' => 'vertical-align:{{VALUE}};',
				),
				'separator' => 'before',
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'sectionrows',
			array(
				'label' => esc_html__( 'Rows', 'essential-classy-addons-for-elementor' ),
			)
		);
		$rows = new \Elementor\Repeater();
		$rows->add_control(
			'featurename',
			array(
				'label'   => esc_html__( 'Feature Name', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'default' => esc_html__( 'Feature', 'essential-classy-addons-for-elementor' ),
			)
		);
		$rows->add_control(
			'featureMediaType',
			array(
				'label'   => esc_html__( 'Media Type', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'none',
				'options' => array(
					'icon'  => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
					'image' => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
					'none'  => esc_html__( 'None', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$rows->add_control(
			'featureIcon',
			array(
				'label'     => esc_html__( 'Feature Icon', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::ICONS,
				'condition' => array(
					'featureMediaType' => 'icon',
				),
			)
		);
		$rows->add_control(
			'featureImage',
			array(
				'label'     => esc_html__( 'Feature Image', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::MEDIA,
				'dynamic'    => array(
					'active' => true,
				),
				'condition' => array(
					'featureMediaType' => 'image',
				),
			)
		);
		$rows->add_control(
			'values',
			array(
				'label'       => esc_html__( 'Values (one per column, separated by | )', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => 'Yes|No',
				'description' => esc_html__( 'Example: Yes|No|Unlimited', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'rows',
			array(
				'label'       => esc_html__( 'Rows', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $rows->get_controls(),
				'title_field' => '{{{ featurename }}}',
			)
		);
		$this->end_controls_section();

		/*Notice panel*/
		$ecwidgetdemolink = esc_url( 'https://ecaddons.com/elements/manual-comparison-table/' );
		$ecwidgetdoclink  = esc_url( 'https://ecaddons.com/docs/manual-comparison-table-widget-tutorial/' );
		include ECAFE_PATH . 'element/widgets/ecafe-widgetpanel-help.php';

		/*style start*/
		$this->start_controls_section(
			'headerStyling',
			array(
				'label' => esc_html__( 'Header', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'headerPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} thead th' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'headerTypography',
				'selector' => '{{WRAPPER}} thead th',
			)
		);
		$this->add_responsive_control(
			'headerWidth',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} thead th' => 'min-width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsHeadertyle' );
		$this->start_controls_tab(
			'tabHeaderN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'headerColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} thead th' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'headerBackground',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} thead th',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'headerBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} thead th',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabHeaderH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'headerColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} thead th:hover' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'headerBackgroundH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} thead th:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'headerBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} thead th:hover',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabHeaderHi',
			array(
				'label' => esc_html__( 'Highlight', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'headerColorHi',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} thead th.ec-mct-highlight' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'headerBackgroundHi',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} thead th.ec-mct-highlight',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'headerBorderHi',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} thead th.ec-mct-highlight',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'headerIconStyling',
			array(
				'label' => esc_html__( 'Header Icon/Svg', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'headericonSize',
			array(
				'label'      => esc_html__( 'Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th i' => 'font-size:{{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th svg' => 'width:{{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'headerIconMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th i,{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th svg' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'headericonColorN',
			array(
				'label'     => esc_html__( 'Normal Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'headericonColorH',
			array(
				'label'     => esc_html__( 'Hover Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th:hover i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th:hover svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'headericonColorHi',
			array(
				'label'     => esc_html__( 'Highlight Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th.ec-mct-highlight i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th.ec-mct-highlight svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'headerImageStyling',
			array(
				'label' => esc_html__( 'Header Image', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'headerImageMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'headerImageWidth',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th img' => 'width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'headerImageHeight',
			array(
				'label'      => esc_html__( 'Height', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th img' => 'height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsHeaderImageStyle' );
		$this->start_controls_tab(
			'tabHeaderImageN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'headerImageBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th img',
			)
		);
		$this->add_responsive_control(
			'headerImageBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'headerImageShadow',
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th img',
			)
		);
		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'headerImageCssFilter',
				'label'    => esc_html__( 'Filter', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th img',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabHeaderImageH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'headerImageBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th:hover img',
			)
		);
		$this->add_responsive_control(
			'headerImageBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th:hover img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'headerImageShadowH',
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th:hover img',
			)
		);
		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'headerImageCssFilterH',
				'label'    => esc_html__( 'Filter', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th:hover img',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabHeaderImageHi',
			array(
				'label' => esc_html__( 'Highlight', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'headerImageBorderHi',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th.ec-mct-highlight img',
			)
		);
		$this->add_responsive_control(
			'headerImageBrHi',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th.ec-mct-highlight img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'headerImageShadowHi',
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th.ec-mct-highlight img',
			)
		);
		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'headerImageCssFilterHi',
				'label'    => esc_html__( 'Filter', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper thead th.ec-mct-highlight img',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'bodyStyling',
			array(
				'label' => esc_html__( 'Body', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'bodyPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} tbody td' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'bodyTypography',
				'selector' => '{{WRAPPER}} tbody td',
			)
		);
		$this->add_responsive_control(
			'bodyWidth',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} tbody td' => 'min-width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsBodyStyle' );
		$this->start_controls_tab(
			'tabBodyN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'bodyColorO',
			array(
				'label'     => esc_html__( 'Odd Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} table tbody > tr:nth-child(odd) > td' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'bodyBgColorO',
			array(
				'label'     => esc_html__( 'Odd Background Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} table tbody > tr:nth-child(odd) > td' => 'background-color: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'bodyColorE',
			array(
				'label'     => esc_html__( 'Even Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} table tbody > tr:nth-child(even) > td' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'bodyBgColorE',
			array(
				'label'     => esc_html__( 'Even Background Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} table tbody > tr:nth-child(even) > td' => 'background-color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'bodyBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} table tbody > tr > td',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabBodyH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'bodyRowHover',
			array(
				'label'     => esc_html__( 'Row Hover', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'no',
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'bodyColorHO',
			array(
				'label'     => esc_html__( 'Odd Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} table tbody > tr:nth-child(odd) > td:hover' => 'color: {{VALUE}};',
				),
				'condition' => array(
					'bodyRowHover!' => 'yes',
				),
			)
		);
		$this->add_control(
			'bodyBgColorHO',
			array(
				'label'     => esc_html__( 'Odd Background Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} table tbody > tr:nth-child(odd) > td:hover' => 'background-color: {{VALUE}};',
				),
				'condition' => array(
					'bodyRowHover!' => 'yes',
				),
			)
		);
		$this->add_control(
			'bodyColorHE',
			array(
				'label'     => esc_html__( 'Even Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} table tbody > tr:nth-child(even) > td:hover' => 'color: {{VALUE}};',
				),
				'condition' => array(
					'bodyRowHover!' => 'yes',
				),
			)
		);
		$this->add_control(
			'bodyBgColorHE',
			array(
				'label'     => esc_html__( 'Even Background Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} table tbody > tr:nth-child(even) > td:hover' => 'background-color: {{VALUE}};',
				),
				'condition' => array(
					'bodyRowHover!' => 'yes',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'      => 'bodyBorderH',
				'label'     => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector'  => '{{WRAPPER}} table tbody > tr > td:hover',
				'condition' => array(
					'bodyRowHover!' => 'yes',
				),
			)
		);
		$this->add_control(
			'bodyColorRH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} table tbody > tr:hover td' => 'color: {{VALUE}};',
				),
				'condition' => array(
					'bodyRowHover' => 'yes',
				),
			)
		);
		$this->add_control(
			'bodyBgColorRH',
			array(
				'label'     => esc_html__( 'Background Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} table tbody > tr:hover td' => 'background-color: {{VALUE}};',
				),
				'condition' => array(
					'bodyRowHover' => 'yes',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'      => 'bodyBorderRH',
				'label'     => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector'  => '{{WRAPPER}} table tbody > tr:hover',
				'condition' => array(
					'bodyRowHover' => 'yes',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'bodyIconStyling',
			array(
				'label' => esc_html__( 'Body Icon/Svg', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'bodyiconSize',
			array(
				'label'      => esc_html__( 'Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td i' => 'font-size:{{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td svg' => 'width:{{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'bodyIconMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td i,{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td svg' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'bodyiconColorN',
			array(
				'label'     => esc_html__( 'Normal Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'bodyiconColorH',
			array(
				'label'     => esc_html__( 'Hover Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td:hover i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td:hover svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'bodyImageStyling',
			array(
				'label' => esc_html__( 'Body Image', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'bodyImageMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'bodyImageWidth',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td img' => 'width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'bodyImageHeight',
			array(
				'label'      => esc_html__( 'Height', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td img' => 'height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsBodyImageStyle' );
		$this->start_controls_tab(
			'tabBodyImageN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'bodyImageBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td img',
			)
		);
		$this->add_responsive_control(
			'bodyImageBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'bodyImageShadow',
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td img',
			)
		);
		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'bodyImageCssFilter',
				'label'    => esc_html__( 'Filter', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td img',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabBodyImageH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'bodyImageBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td:hover img',
			)
		);
		$this->add_responsive_control(
			'bodyImageBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td:hover img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'bodyImageShadowH',
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td:hover img',
			)
		);
		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'bodyImageCssFilterH',
				'label'    => esc_html__( 'Filter', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper tbody td:hover img',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'sbHtyling',
			array(
				'label' => esc_html__( 'Scroll Bar', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->start_controls_tabs( 'sBHTabs' );
		$this->start_controls_tab(
			'sBarH',
			array(
				'label' => esc_html__( 'Scrollbar', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'sBBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper::-webkit-scrollbar',
			)
		);
		$this->add_responsive_control(
			'sBHeightH',
			array(
				'type'        => Controls_Manager::SLIDER,
				'label'       => esc_html__( 'Height', 'essential-classy-addons-for-elementor' ),
				'size_units'  => array( 'px' ),
				'range'       => array(
					'px' => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'render_type' => 'ui',
				'selectors'   => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper::-webkit-scrollbar' => 'height: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'sbThumbH',
			array(
				'label' => esc_html__( 'Thumb', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'sbThumbBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper::-webkit-scrollbar-thumb',
			)
		);
		$this->add_responsive_control(
			'sbThumbBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper::-webkit-scrollbar-thumb' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'sbThumbShadowH',
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper::-webkit-scrollbar-thumb',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'sbTrackH',
			array(
				'label' => esc_html__( 'Track', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'sbTrackBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper::-webkit-scrollbar-track',
			)
		);
		$this->add_responsive_control(
			'sbTrackBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-manual-comparison-table-wrapper::-webkit-scrollbar-track' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'sbTrackShadowH',
				'selector' => '{{WRAPPER}} .ec-manual-comparison-table-wrapper::-webkit-scrollbar-track',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
	}

	protected function render() {
		$settings = $this->get_settings_for_display();
		$columns  = ! empty( $settings['columns'] ) ? $settings['columns'] : array();
		$rows     = ! empty( $settings['rows'] ) ? $settings['rows'] : array();

		if ( empty( $columns ) ) {
			return;
		}

		$equalWidthClass = ( ! empty( $settings['enableEqualWidth'] ) && $settings['enableEqualWidth'] === 'yes' ) ? 'ec-mct-equalWidth' : '';
		$output          = '<div class="ec-manual-comparison-table-wrapper ' . esc_attr( $equalWidthClass ) . '">';
			$output     .= '<table>';
			$output     .= '<thead><tr>';
			$output     .= '<th class="ec-mct-feature-col"></th>';

		foreach ( $columns as $col ) {

			$title = isset( $col['columntitle'] ) ? $col['columntitle'] : '';
			$class = ( ! empty( $col['highlight'] ) && $col['highlight'] === 'yes' ) ? 'ec-mct-highlight' : '';

			$output .= '<th class="' . esc_attr( $class ) . '">';
			if ( isset( $col['columnMediaType'] ) ) {

				if ( $col['columnMediaType'] === 'icon' && ! empty( $col['columnIcon']['value'] ) ) {

					$columnIcon = '';
					if ( ! empty( $col['columnIcon'] ) ) {
						ob_start();
						\Elementor\Icons_Manager::render_icon( $col['columnIcon'], array( 'aria-hidden' => 'true' ) );
						$columnIcon = ob_get_contents();
						ob_end_clean();
					}
					$output .= $columnIcon;
				}

				if ( $col['columnMediaType'] === 'image' && ! empty( $col['columnImage']['url'] ) ) {
					$imageId  = $col['columnImage']['id'];
					$imageAlt = get_post_meta( $imageId, '_wp_attachment_image_alt', true );
					if ( empty( $imageAlt ) ) {
						$imageAlt = get_the_title( $imageId );
					}
					$output .= '<img src="' . esc_url( $col['columnImage']['url'] ) . '" alt="' . esc_attr( $imageAlt ) . '" />';
				}
			}
			$output .= esc_html( $title );
			$output .= '</th>';
		}

			$output .= '</tr></thead>';

			$output .= '<tbody>';

		foreach ( $rows as $row ) {

			$feature    = isset( $row['featurename'] ) ? $row['featurename'] : '';
			$raw_values = isset( $row['values'] ) ? wp_strip_all_tags( $row['values'] ) : '';
			$values     = array_map( 'trim', explode( '|', $raw_values ) );

			$output .= '<tr>';
			$output .= '<td class="ec-mct-feature-name">';
			if ( isset( $row['featureMediaType'] ) ) {

				if ( $row['featureMediaType'] === 'icon' && ! empty( $row['featureIcon']['value'] ) ) {
					$featureIcon = '';
					if ( ! empty( $row['featureIcon'] ) ) {
						ob_start();
						\Elementor\Icons_Manager::render_icon( $row['featureIcon'], array( 'aria-hidden' => 'true' ) );
						$featureIcon = ob_get_contents();
						ob_end_clean();
					}
					$output .= $featureIcon;
				}

				if ( $row['featureMediaType'] === 'image' && ! empty( $row['featureImage']['url'] ) ) {
					$imageIdFI  = $row['featureImage']['id'];
					$imageAltFI = get_post_meta( $imageIdFI, '_wp_attachment_image_alt', true );
					if ( empty( $imageAltFI ) ) {
						$imageAltFI = get_the_title( $imageIdFI );
					}
					$output .= '<img src="' . esc_url( $row['featureImage']['url'] ) . '" alt="' . esc_attr( $imageAltFI ) . '" />';
				}
			}

			$output .= esc_html( $feature );
			$output .= '</td>';

			foreach ( $columns as $index => $col ) {

				$output .= '<td>';
				$output .= esc_html( $values[ $index ] ?? '' );
				$output .= '</td>';
			}

			$output .= '</tr>';
		}

			$output .= '</tbody>';
			$output .= '</table>';
		$output     .= '</div>';
		echo wp_kses_normalize_entities( $output );
	}
}
