<?php
namespace EcafeAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
use Elementor\Group_Control_Typography;
use Elementor\Core\Schemes\Typography;
use Elementor\Scheme_Color;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Text_Shadow;

use EcafeAddons\EcafeElementLoad;

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

class Ecafe_Changelog extends Widget_Base {

	public function get_name() {
		return 'ecafe-changelog';
	}

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

	public function get_icon() {
		return 'ecafe-ele-back-icon ecafe-changelog-icon';
	}

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

	public function get_keywords() {
		return array( 'log', 'changelog', 'list', 'animation', 'lists', 'release notes', 'version history', 'updates log', 'change history', 'revision tracker' );
	}

	public function get_script_depends() {
		return array( 'ecafe-changelog' );
	}
	public function get_custom_help_url() {
		return 'https://store.kapasias.com/helpdesk/';
	}
	public function has_widget_inner_wrapper(): bool {
		return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}
	protected function register_controls() {

		$this->start_controls_section(
			'contentSection',
			array(
				'label' => esc_html__( 'Changelog', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'iconLibrary',
			array(
				'label'   => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::ICONS,
				'default' => array(
					'value'   => 'fab fa-microblog',
					'library' => 'brands',
				),
			)
		);
		$this->add_control(
			'title',
			array(
				'label'       => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'default'     => esc_html__( 'Version 1.0', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Title', 'essential-classy-addons-for-elementor' ),
				'separator'   => 'before',
			)
		);
		$this->add_control(
			'titleTag',
			array(
				'label'   => esc_html__( 'Tag', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'h1',
				'options' => \EcafeHelper::getHtmlTag(),
			)
		);
		$this->add_control(
			'extraText',
			array(
				'label'       => esc_html__( 'Extra Text', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'default'     => esc_html__( '01 Jan 2021', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Text', 'essential-classy-addons-for-elementor' ),
				'separator'   => 'before',
			)
		);
		$repeater = new \Elementor\Repeater();
		$repeater->add_control(
			'clLabel',
			array(
				'label'       => esc_html__( 'Label', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'default'     => esc_html__( 'Label', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Label', 'essential-classy-addons-for-elementor' ),
			)
		);
		$repeater->add_control(
			'clContent',
			array(
				'label'       => esc_html__( 'Content', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::WYSIWYG,
				'default'     => esc_html__( 'It is a long established fact here.', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter your content here', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),
			)
		);
		$repeater->add_control(
			'clLabelColor',
			array(
				'label'     => esc_html__( 'Label Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list .eca-changelog-label{{CURRENT_ITEM}} .eca-changelog-label-in' => 'color: {{VALUE}};',
				),
			)
		);
		$repeater->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'clLabelBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list .eca-changelog-label{{CURRENT_ITEM}} .eca-changelog-label-in',
			)
		);
		$this->add_control(
			'clList',
			array(
				'label'       => esc_html__( 'Content', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'separator'   => 'before',
				'default'     => array(
					array(
						'clLabel'   => 'Add',
						'clContent' => 'It is a long established fact here.',
					),
					array(
						'clLabel'   => 'Update',
						'clContent' => 'Various versions have evolved over the years.',
					),
					array(
						'clLabel'   => 'Fix',
						'clContent' => 'There are many variations of passages.',
					),
				),
				'title_field' => '{{{ clContent }}}',
			)
		);
		$this->end_controls_section();

		/*advanced*/
		$this->start_controls_section(
			'advancedSection',
			array(
				'label' => esc_html__( 'Advanced', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'oneByOneAnimation',
			array(
				'label'     => esc_html__( 'One By One Animation', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'default'   => 'no',
			)
		);
		$this->add_control(
			'oneByOneAnimationGap',
			array(
				'label'     => __( 'Gap', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 1,
				'max'       => 5000,
				'step'      => 100,
				'default'   => 700,
				'condition' => array(
					'oneByOneAnimation' => 'yes',
				),
			)
		);
		$this->add_control(
			'oneByOneAnimationDelay',
			array(
				'label'     => esc_html__( 'Delay', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 1,
				'max'       => 10000,
				'step'      => 100,
				'default'   => 700,
				'condition' => array(
					'oneByOneAnimation' => 'yes',
				),
			)
		);
		$this->end_controls_section();
		/*advanced*/

		/*Tilt Effect Options*/
		include ECAFE_PATH . 'element/widgets/ecafe-tilt-options.php';

		/*Tippy Tooltip Options*/
		include ECAFE_PATH . 'element/widgets/ecafe-tippy-options.php';

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

		/*
		style start*/
		/*heading icon start*/
		$this->start_controls_section(
			'hiStyling',
			array(
				'label' => esc_html__( 'Heading Icon', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'hiPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'hiMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'hiSize',
			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' => 200,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-icon' => 'font-size:{{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-icon svg' => 'width:{{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'hiColorNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-icon' => 'color: {{VALUE}};',
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-icon svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'hiBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-icon',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'hiBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-icon',
			)
		);
		$this->add_responsive_control(
			'hiBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'hiShadowNorm',
				'selector' => '{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-icon',
			)
		);
		$this->end_controls_section();
		/*heading icon end*/

		/*heading text start*/
		$this->start_controls_section(
			'htStyling',
			array(
				'label' => esc_html__( 'Heading Text', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'htPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'htMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'htTypo',
				'selector' => '{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-title',
			)
		);
		$this->add_control(
			'htColorNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-title' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'htBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-title',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'htBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-title',
			)
		);
		$this->add_responsive_control(
			'htBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'htShadowNorm',
				'selector' => '{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-title',
			)
		);
		$this->end_controls_section();
		/*heading text end*/

		/*heading extra text start*/
		$this->start_controls_section(
			'hetStyling',
			array(
				'label' => esc_html__( 'Heading Extra Text', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'hetPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-extra-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'hetMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-extra-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'hetTypo',
				'selector' => '{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-extra-text',
			)
		);
		$this->add_control(
			'hetColorNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-extra-text' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'hetBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-extra-text',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'hetBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-extra-text',
			)
		);
		$this->add_responsive_control(
			'hetBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-extra-text' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'hetShadowNorm',
				'selector' => '{{WRAPPER}} .eca-changelog .eca-cl-header .eca-cl-extra-text',
			)
		);
		$this->end_controls_section();
		/*heading extra text end*/

		/*heading box start*/
		$this->start_controls_section(
			'hBoxStyling',
			array(
				'label' => esc_html__( 'Heading Box', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'hAlign',
			array(
				'label'     => esc_html__( 'Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start' => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'     => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'   => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header' => 'justify-content:{{VALUE}};',
				),
			)
		);
		$this->add_responsive_control(
			'hPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'hMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'hBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-changelog .eca-cl-header',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'hBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-changelog .eca-cl-header',
			)
		);
		$this->add_responsive_control(
			'hBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-cl-header' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'hShadowNorm',
				'selector' => '{{WRAPPER}} .eca-changelog .eca-cl-header',
			)
		);
		$this->end_controls_section();
		/*heading box end*/

		/*lists common start*/
		$this->start_controls_section(
			'listsCommonStyling',
			array(
				'label' => esc_html__( 'Lists Common', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'listsCommonMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'commonLabelStyling',
			array(
				'label'     => esc_html__( 'Label', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$this->add_responsive_control(
			'listsLabelPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list .eca-changelog-label .eca-changelog-label-in' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'listsLabelTypo',
				'selector' => '{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list .eca-changelog-label .eca-changelog-label-in',
			)
		);
		$this->add_responsive_control(
			'listsLabelMinWidth',
			array(
				'label'      => esc_html__( 'Min. Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 300,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list .eca-changelog-label .eca-changelog-label-in' => 'min-width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'listsLabelBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list .eca-changelog-label .eca-changelog-label-in',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'listsLabelBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list .eca-changelog-label .eca-changelog-label-in',
			)
		);
		$this->add_responsive_control(
			'listsLabelBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list .eca-changelog-label .eca-changelog-label-in' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'listsLabelShadow',
				'selector' => '{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list .eca-changelog-label .eca-changelog-label-in',
			)
		);
		$this->add_control(
			'commonDescStyling',
			array(
				'label'     => esc_html__( 'Description', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'commonDescTypo',
				'selector' => '{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list,{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list p',
			)
		);
		$this->add_control(
			'commonDescColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list,{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list p' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'commonDescLinkStyling',
			array(
				'label'     => esc_html__( 'Link', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'commonDescLinkTypo',
				'selector' => '{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list a',
			)
		);
		$this->add_control(
			'commonDescLinkColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-changelog .eca-changelog-lists .eca-changelog-list a' => 'color: {{VALUE}};',
				),
			)
		);
		$this->end_controls_section();
		/*lists common end*/

		/*list box start*/
		$this->start_controls_section(
			'listBoxStyling',
			array(
				'label' => esc_html__( 'List Box', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'listBoxPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-changelog-lists' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'listBoxMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-changelog-lists' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'listBoxBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-changelog .eca-changelog-lists',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'listBoxBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-changelog .eca-changelog-lists',
			)
		);
		$this->add_responsive_control(
			'listBoxBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-changelog .eca-changelog-lists' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'listBoxShadow',
				'selector' => '{{WRAPPER}} .eca-changelog .eca-changelog-lists',
			)
		);
		$this->end_controls_section();
		/*
		list box end*/
		/*style end*/
	}

	protected function render() {

		$settings    = $this->get_settings_for_display();
		$iconLibrary = ! empty( $settings['iconLibrary'] ) ? $settings['iconLibrary'] : '';
		$title       = ! empty( $settings['title'] ) ? $settings['title'] : '';
		$titleTag    = ! empty( $settings['titleTag'] ) ? $settings['titleTag'] : 'h1';
		$extraText   = ! empty( $settings['extraText'] ) ? $settings['extraText'] : '';

		$oneByOneAnimation      = ( isset( $settings['oneByOneAnimation'] ) && $settings['oneByOneAnimation'] == 'yes' ) ? 'yes' : 'no';
		$oneByOneAnimationGap   = ! empty( $settings['oneByOneAnimationGap'] ) ? $settings['oneByOneAnimationGap'] : 700;
		$oneByOneAnimationDelay = ! empty( $settings['oneByOneAnimationDelay'] ) ? $settings['oneByOneAnimationDelay'] : 700;
		$DataAttr               = $class = '';
		if ( $oneByOneAnimation == 'yes' ) {
			$DataAttr .= ' data-one-by-one="' . $oneByOneAnimation . '"';
			$DataAttr .= ' data-gap="' . esc_attr( $oneByOneAnimationGap ) . '"';
			$DataAttr .= ' data-delay="' . esc_attr( $oneByOneAnimationDelay ) . '"';
			$class     = ' one-by-one-anim';
		}

		$tiltclass  = '';
		$tiltrender = '';
		if ( isset( $settings['tiltEffect'] ) && $settings['tiltEffect'] === 'yes' ) {
			/*Tilt Effect Render*/
			include ECAFE_PATH . 'element/widgets/ecafe-tilt-render.php';
		}
		$tippyclass  = '';
		$tippyrender = '';
		if ( isset( $settings['tippyTooltip'] ) && $settings['tippyTooltip'] === 'yes' ) {
			/*Tippy Tooltip Render*/
			include ECAFE_PATH . 'element/widgets/ecafe-tippy-render.php';
		}
		$output = '<div class="eca-changelog ' . esc_attr( $class ) . ' ' . esc_attr( $tiltclass ) . ' ' . esc_attr( $tippyclass ) . '" ' . $DataAttr . ' ' . $tiltrender . ' ' . $tippyrender . '>';
		if ( ! empty( $iconLibrary ) || ! empty( $title ) || ! empty( $extraText ) ) {
			$output .= '<div class="eca-cl-header">';
			if ( ! empty( $iconLibrary ) ) {
				ob_start();
				\Elementor\Icons_Manager::render_icon( $iconLibrary, array( 'aria-hidden' => 'true' ) );
				$output .= '<span class="eca-cl-icon">' . ob_get_contents() . '</span>';
				ob_end_clean();
			}
			if ( ! empty( $title ) ) {
						$output .= '<' . \EcafeHelper::check_and_validate_html_tag( $titleTag ) . ' class="eca-cl-title">' . esc_html( $title ) . '</' . \EcafeHelper::check_and_validate_html_tag( $titleTag ) . '>';
			}
			if ( ! empty( $extraText ) ) {
					$output .= '<span class="eca-cl-extra-text">' . esc_html( $extraText ) . '</span>';
			}
					$output .= '</div>';
		}

			$output .= '<ul class="eca-changelog-lists">';
		foreach ( $settings['clList'] as $item ) {
			$clLabel   = ! empty( $item['clLabel'] ) ? $item['clLabel'] : '';
			$clContent = ! empty( $item['clContent'] ) ? $item['clContent'] : '';

			$output         .= '<li class="eca-changelog-list">';
			$output         .= '<span class="elementor-repeater-item-' . esc_attr( $item['_id'] ) . ' eca-cl-' . esc_attr( $clLabel ) . ' eca-changelog-label">';
					$output .= '<span class="eca-changelog-label-in">' . esc_html( $clLabel ) . '</span>';
			$output         .= '</span>';
			$output         .= wp_kses_post( $clContent );
			$output         .= '</li>';
		}
			$output .= '</ul>';
			$output .= '</div>';

			echo wp_kses_normalize_entities( $output );
	}
}
