<?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 EcafeAddons\EcafeElementLoad;

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

class Ecafe_Lottie extends Widget_Base {

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

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

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

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

	public function get_keywords() {
		return array( 'animations', 'lottiefiles', 'bodylines', 'lottie animation', 'bodymoving', 'hover', 'click', 'mouse over out effect', 'parallax effect' );
	}

	public function get_script_depends() {
		return array( 'ecafe-lottie' );
	}

	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__( 'Lottie', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'type',
			array(
				'label'   => esc_html__( 'Type', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'url',
				'options' => array(
					'url'  => esc_html__( 'URL', 'essential-classy-addons-for-elementor' ),
					'file' => esc_html__( 'File', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'la_json_url',
			array(
				'label'       => esc_html__( 'JSON URL', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::URL,
				'placeholder' => esc_html__( 'https://www.demo-link.com', 'essential-classy-addons-for-elementor' ),
				'default'     => array(
					'url' => '',
				),
				'condition'   => array(
					'type' => 'url',
				),
			)
		);
		$this->add_control(
			'la_json_file',
			array(
				'label'              => esc_html__( 'File', 'essential-classy-addons-for-elementor' ),
				'type'               => Controls_Manager::MEDIA,
				'media_type'         => 'application/json',
				'frontend_available' => true,
				'condition'          => array(
					'type' => 'file',
				),
			)
		);
		$this->end_controls_section();
		/*setting option start*/
		$this->start_controls_section(
			'section_la_settings_option',
			array(
				'label' => esc_html__( 'Animation Settings', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'la_action',
			array(
				'label'   => esc_html__( 'Play on', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'default',
				'options' => array(
					'default'              => esc_html__( 'Default', 'essential-classy-addons-for-elementor' ),
					'autoplay'             => esc_html__( 'Auto Play', 'essential-classy-addons-for-elementor' ),
					'hover'                => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
					'click'                => esc_html__( 'Click', 'essential-classy-addons-for-elementor' ),
					'mouseoverout'         => esc_html__( 'Mouse Over Out Effect', 'essential-classy-addons-for-elementor' ),
					'parallax_effect'      => esc_html__( 'Parallax Effect', 'essential-classy-addons-for-elementor' ),
					'reverse_second_click' => esc_html__( 'Reverse on Second Click', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'la_action_cstclass',
			array(
				'label'       => esc_html__( 'Trigger on Custom Class', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'placeholder' => esc_html__( 'Custom Class', 'essential-classy-addons-for-elementor' ),
				'condition'   => array(
					'la_action' => array( 'hover', 'mouseoverout' ),
				),
			)
		);
		$this->add_control(
			'loop',
			array(
				'label'        => esc_html__( 'Loop Animation', 'essential-classy-addons-for-elementor' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'ON', 'essential-classy-addons-for-elementor' ),
				'label_off'    => esc_html__( 'OFF', 'essential-classy-addons-for-elementor' ),
				'return_value' => 'true',
				'default'      => 'false',
				'separator'    => 'before',
				'condition'    => array(
					'la_action!' => 'default',
				),
			)
		);
		$this->add_control(
			'loop_counter',
			array(
				'label'     => esc_html__( 'Loops Counter', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => -1,
				'max'       => 100,
				'step'      => 1,
				'condition' => array(
					'loop' => 'true',
				),
			)
		);
		$this->add_control(
			'speed',
			array(
				'label'     => esc_html__( 'Animation Play Speed', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 0.1,
						'max'  => 1,
						'step' => 0.1,
					),
				),
				'default'   => array(
					'unit' => 'px',
					'size' => 0.5,
				),
				'condition' => array(
					'la_action!' => array( 'default', 'parallax_effect' ),
				),
				'separator' => 'before',
			)
		);
		$this->add_control(
			'la_scrollbased',
			array(
				'label'       => esc_html__( 'On Scroll Animation', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => 'la_custom',
				'options'     => array(
					'la_custom'   => esc_html__( 'Inline', 'essential-classy-addons-for-elementor' ),
					'la_document' => esc_html__( 'Body', 'essential-classy-addons-for-elementor' ),
				),
				'description' => __( 'Note : If you select "Body", Animation will start and end based on whole page\'s height. In Inline, You need to give offset and duration for animation.', 'essential-classy-addons-for-elementor' ),
				'separator'   => 'before',
				'condition'   => array(
					'la_action' => 'parallax_effect',
				),
			)
		);

		$this->add_responsive_control(
			'la_section_duration',
			array(
				'label'     => esc_html__( 'Duration', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 50,
						'max'  => 2000,
						'step' => 1,
					),
				),
				'default'   => array(
					'unit' => 'px',
					'size' => 500,
				),
				'condition' => array(
					'la_action'      => 'parallax_effect',
					'la_scrollbased' => 'la_custom',
				),
			)
		);
		$this->add_responsive_control(
			'la_section_offset',
			array(
				'label'     => esc_html__( 'Offset', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => -1000,
						'max'  => 1000,
						'step' => 1,
					),
				),
				'default'   => array(
					'unit' => 'px',
					'size' => 0,
				),
				'condition' => array(
					'la_action'      => 'parallax_effect',
					'la_scrollbased' => 'la_custom',
				),
			)
		);
		$this->add_control(
			'la_custom_time',
			array(
				'label'     => esc_html__( 'Animation Custom Time', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'ON', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'OFF', 'essential-classy-addons-for-elementor' ),
				'condition' => array(
					'la_action' => array( 'hover', 'click', 'mouseoverout', 'parallax_effect' ),
				),
			)
		);
		$this->add_control(
			'la_start_time',
			array(
				'label'     => esc_html__( 'Start Time', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 5000,
				'step'      => 1,
				'condition' => array(
					'la_action'      => array( 'hover', 'click', 'mouseoverout', 'parallax_effect' ),
					'la_custom_time' => 'yes',
				),
			)
		);
		$this->add_control(
			'la_end_time',
			array(
				'label'     => esc_html__( 'End Time', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 5000,
				'step'      => 1,
				'condition' => array(
					'la_action'      => array( 'hover', 'click', 'mouseoverout', 'parallax_effect' ),
					'la_custom_time' => 'yes',
				),
			)
		);
		$this->add_control(
			'la_link',
			array(
				'label'     => esc_html__( 'URL', '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',
				'separator' => 'before',
			)
		);
		$this->add_control(
			'la_link_url',
			array(
				'label'       => esc_html__( 'URL', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::URL,
				'dynamic'     => array(
					'active' => true,
				),
				'placeholder' => esc_html__( 'https://www.demo-link.com', 'essential-classy-addons-for-elementor' ),
				'default'     => array(
					'url' => '#',
				),
				'condition'   => array(
					'la_link' => 'yes',
				),
			)
		);
		$this->add_control(
			'la_link_delay',
			array(
				'label'     => esc_html__( 'Click Delay', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 100,
						'max'  => 10000,
						'step' => 100,
					),
				),
				'default'   => array(
					'unit' => 'px',
					'size' => 1000,
				),
				'condition' => array(
					'la_link' => 'yes',
				),
				'separator' => 'before',
			)
		);
		$this->add_control(
			'la_lconic_layout',
			array(
				'label'     => esc_html__( 'Iconic Layout', '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',
				'separator' => 'before',
			)
		);
		$this->add_control(
			'la_lconic_layout_heading',
			array(
				'label'     => esc_html__( 'Heading', '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'   => 'yes',
				'separator' => 'before',
				'condition' => array(
					'la_lconic_layout' => 'yes',
				),
			)
		);
		$this->add_control(
			'la_lconic_layout_title',
			array(
				'label'     => esc_html__( 'Title', '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'   => 'yes',
				'separator' => 'before',
				'condition' => array(
					'la_lconic_layout' => 'yes',
				),
			)
		);
		$this->add_control(
			'la_lconic_layout_description',
			array(
				'label'     => esc_html__( 'Description', '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'   => 'yes',
				'separator' => 'before',
				'condition' => array(
					'la_lconic_layout' => 'yes',
				),
			)
		);
		$this->add_control(
			'la_cursor',
			array(
				'label'     => esc_html__( 'Cursor', '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',
				'separator' => 'before',
			)
		);
		$this->add_control(
			'la_cursor_select',
			array(
				'label'     => esc_html__( 'Select', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'pointer',
				'options'   => array(
					'pointer'    => esc_html__( 'Default', 'essential-classy-addons-for-elementor' ),
					'alias'      => esc_html__( 'Alias', 'essential-classy-addons-for-elementor' ),
					'all-scroll' => esc_html__( 'All Scroll', 'essential-classy-addons-for-elementor' ),
					'crosshair'  => esc_html__( 'Crosshair', 'essential-classy-addons-for-elementor' ),
					'e-resize'   => esc_html__( 'E Resize', 'essential-classy-addons-for-elementor' ),
					'grab'       => esc_html__( 'Grab', 'essential-classy-addons-for-elementor' ),
					'help'       => esc_html__( 'Help', 'essential-classy-addons-for-elementor' ),
					'wait'       => esc_html__( 'Wait', 'essential-classy-addons-for-elementor' ),
					'zoom-in'    => esc_html__( 'Zoom In', 'essential-classy-addons-for-elementor' ),
				),
				'condition' => array(
					'la_cursor' => 'yes',
				),
			)
		);
		$this->end_controls_section();
		/*setting option end*/

		/*Heading option start*/
		$this->start_controls_section(
			'section_heading_option',
			array(
				'label'     => esc_html__( 'Heading Options', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_CONTENT,
				'condition' => array(
					'la_lconic_layout'         => 'yes',
					'la_lconic_layout_heading' => 'yes',
				),
			)
		);
		$this->add_control(
			'heading_tag',
			array(
				'label'   => esc_html__( 'Tag', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'h2',
				'options' => array(
					'h1' => esc_html__( 'H1', 'essential-classy-addons-for-elementor' ),
					'h2' => esc_html__( 'H2', 'essential-classy-addons-for-elementor' ),
					'h3' => esc_html__( 'H3', 'essential-classy-addons-for-elementor' ),
					'h4' => esc_html__( 'H4', 'essential-classy-addons-for-elementor' ),
					'h5' => esc_html__( 'H5', 'essential-classy-addons-for-elementor' ),
					'h6' => esc_html__( 'H6', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'heading_text',
			array(
				'label'       => esc_html__( 'Heading', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'default'     => esc_html__( 'HEADING', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Heading', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_responsive_control(
			'heading_align',
			array(
				'label'     => esc_html__( 'Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'left'   => 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',
					),
					'right'  => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'default'   => 'center',
				'separator' => 'before',
				'selectors' => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-heading' => 'text-align: {{VALUE}};',
				),

			)
		);
		$this->end_controls_section();
		/*Heading option end*/

		/*Title option start*/
		$this->start_controls_section(
			'section_title_option',
			array(
				'label'     => esc_html__( 'Title Options', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_CONTENT,
				'condition' => array(
					'la_lconic_layout'       => 'yes',
					'la_lconic_layout_title' => 'yes',
				),
			)
		);
		$this->add_control(
			'title_tag',
			array(
				'label'   => esc_html__( 'Tag', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'h3',
				'options' => \EcafeHelper::getHtmlTag(),
			)
		);
		$this->add_control(
			'title_text',
			array(
				'label'       => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'default'     => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Title', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_responsive_control(
			'title_align',
			array(
				'label'     => esc_html__( 'Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'left'   => 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',
					),
					'right'  => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'default'   => 'center',
				'separator' => 'before',
				'selectors' => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-title' => 'text-align: {{VALUE}};',
				),

			)
		);
		$this->end_controls_section();
		/*Title option end*/

		/*Description option start*/
		$this->start_controls_section(
			'section_description_option',
			array(
				'label'     => esc_html__( 'Description Options', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_CONTENT,
				'condition' => array(
					'la_lconic_layout'             => 'yes',
					'la_lconic_layout_description' => 'yes',
				),
			)
		);
		$this->add_control(
			'description_tag',
			array(
				'label'   => esc_html__( 'Tag', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'div',
				'options' => array(
					'h1'  => esc_html__( 'H1', 'essential-classy-addons-for-elementor' ),
					'h2'  => esc_html__( 'H2', 'essential-classy-addons-for-elementor' ),
					'h3'  => esc_html__( 'H3', 'essential-classy-addons-for-elementor' ),
					'h4'  => esc_html__( 'H4', 'essential-classy-addons-for-elementor' ),
					'h5'  => esc_html__( 'H5', 'essential-classy-addons-for-elementor' ),
					'h6'  => esc_html__( 'H6', 'essential-classy-addons-for-elementor' ),
					'p'   => esc_html__( 'P', 'essential-classy-addons-for-elementor' ),
					'div' => esc_html__( 'DIV', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'description_text',
			array(
				'label'   => esc_html__( 'Description', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::WYSIWYG,
				'default' => esc_html__( 'I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'essential-classy-addons-for-elementor' ),
				'dynamic' => array( 'active' => true ),
			)
		);
		$this->add_responsive_control(
			'description_align',
			array(
				'label'     => esc_html__( 'Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'left'    => 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',
					),
					'right'   => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
					'justify' => array(
						'title' => esc_html__( 'Justify', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-justify',
					),
				),
				'default'   => 'center',
				'separator' => 'before',
				'selectors' => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-description' => 'text-align: {{VALUE}};',
				),

			)
		);
		$this->end_controls_section();
		/*Description option end*/

		/*Renderer start*/
		$this->start_controls_section(
			'section_render_option',
			array(
				'label' => esc_html__( 'Render JSON', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'anim_renderer',
			array(
				'label'     => esc_html__( 'Render as', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'svg',
				'options'   => array(
					'svg'    => esc_html__( 'SVG', 'essential-classy-addons-for-elementor' ),
					'canvas' => esc_html__( 'Canvas', 'essential-classy-addons-for-elementor' ),
				),
				'separator' => 'before',
			)
		);
		$this->end_controls_section();
		/*Renderer option end*/

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

		/*
		style start*/
		/*Heading & Bottom Shape Style start*/
		$this->start_controls_section(
			'section_heading_style',
			array(
				'label'     => esc_html__( 'Heading & Bottom Shape', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'la_lconic_layout' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'heading_padding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-heading' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'condition'  => array(
					'la_lconic_layout'         => 'yes',
					'la_lconic_layout_heading' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'heading_margin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-heading' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'condition'  => array(
					'la_lconic_layout'         => 'yes',
					'la_lconic_layout_heading' => 'yes',
				),
				'separator'  => 'after',
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'      => 'heading_typography',
				'label'     => esc_html__( 'Typography', 'essential-classy-addons-for-elementor' ),
				'selector'  => '{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-heading',
				'condition' => array(
					'la_lconic_layout'         => 'yes',
					'la_lconic_layout_heading' => 'yes',
				),
			)
		);
		$this->add_control(
			'heading_color',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-heading' => 'color: {{VALUE}}',
				),
				'condition' => array(
					'la_lconic_layout'         => 'yes',
					'la_lconic_layout_heading' => 'yes',
				),
			)
		);
		$this->add_control(
			'bg_color_head',
			array(
				'label'     => esc_html__( 'You need to set below Three background color.', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$this->add_control(
			'bg_color_1',
			array(
				'label' => esc_html__( 'Background Color 1', 'essential-classy-addons-for-elementor' ),
				'type'  => Controls_Manager::COLOR,
			)
		);
		$this->add_control(
			'bg_color_2',
			array(
				'label' => esc_html__( 'Background Color 2', 'essential-classy-addons-for-elementor' ),
				'type'  => Controls_Manager::COLOR,
			)
		);
		$this->add_control(
			'bg_color_3',
			array(
				'label'     => esc_html__( 'Background Color 3', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-heading,
					{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-heading:before' => 'background: linear-gradient(90deg, {{bg_color_1.VALUE}} 0%, {{bg_color_2.VALUE}} 30%, {{bg_color_3.VALUE}} 100%);',
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic:after' => 'background: linear-gradient(270deg, {{bg_color_1.VALUE}} 0%, {{bg_color_2.VALUE}} 30%, {{bg_color_3.VALUE}} 100%)',
				),
			)
		);
		$this->add_control(
			'bg_color_half_round',
			array(
				'label'     => esc_html__( 'Half Round Shape Background', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'separator' => 'before',
				'selectors' => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-heading:after' => 'background: {{VALUE}};',
				),
				'condition' => array(
					'la_lconic_layout'         => 'yes',
					'la_lconic_layout_heading' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'bottom_shape_height_width',
			array(
				'label'       => esc_html__( 'Bottom Shape Height', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => array( 'px', '%' ),
				'range'       => array(
					'px' => array(
						'min'  => 0,
						'max'  => 500,
						'step' => 5,
					),
					'%'  => array(
						'min' => 0,
						'max' => 100,
					),
				),
				'render_type' => 'ui',
				'selectors'   => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic:after' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
				),
				'condition'   => array(
					'la_lconic_layout'         => 'yes',
					'la_lconic_layout_heading' => 'yes',
				),
			)
		);
		$this->end_controls_section();
		/*Heading & Bottom Shape Style end*/

		/*Title Style start*/
		$this->start_controls_section(
			'section_title_style',
			array(
				'label'     => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'la_lconic_layout'       => 'yes',
					'la_lconic_layout_title' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'title_padding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'title_margin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'separator'  => 'after',
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'title_typography',
				'label'    => esc_html__( 'Typography', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-title',
			)
		);
		$this->add_control(
			'title_color',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-title' => 'color: {{VALUE}}',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'title_background',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-title',

			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'      => 'title_border',
				'label'     => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector'  => '{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-title',
				'separator' => 'before',
			)
		);
		$this->add_responsive_control(
			'title_br',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'title_shadow',
				'label'    => esc_html__( 'Box Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-title',
			)
		);
		$this->end_controls_section();
		/*Title Style end*/

		/*Description Style start*/
		$this->start_controls_section(
			'section_description_style',
			array(
				'label'     => esc_html__( 'Description', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'la_lconic_layout'             => 'yes',
					'la_lconic_layout_description' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'description_padding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-description' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'description_margin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'separator'  => 'after',
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'description_typography',
				'label'    => esc_html__( 'Typography', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-description',
			)
		);
		$this->add_control(
			'description_color',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-description' => 'color: {{VALUE}}',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'description_background',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-description',

			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'      => 'description_border',
				'label'     => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector'  => '{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-description',
				'separator' => 'before',
			)
		);
		$this->add_responsive_control(
			'description_br',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-description' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'description_shadow',
				'label'    => esc_html__( 'Box Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-lotties-animation-wrapper-iconic .eca-iconic-description',
			)
		);
		$this->end_controls_section();
		/*Description Style end*/

		/*JSON Animation Style start*/
		$this->start_controls_section(
			'section_lotties_option',
			array(
				'label' => esc_html__( 'JSON Animation', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'content_align',
			array(
				'label'         => esc_html__( 'Alignment', 'essential-classy-addons-for-elementor' ),
				'type'          => Controls_Manager::CHOOSE,
				'options'       => array(
					'left'   => 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',
					),
					'right'  => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'default'       => 'center',
				'prefix_ class' => 'text-%s',
				'separator'     => 'before',
			)
		);
		$this->add_responsive_control(
			'max_width',
			array(
				'label'       => esc_html__( 'Maximum Width', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => array( 'px', '%' ),
				'range'       => array(
					'px' => array(
						'min'  => 0,
						'max'  => 1000,
						'step' => 5,
					),
					'%'  => array(
						'min' => 0,
						'max' => 100,
					),
				),
				'default'     => array(
					'unit' => '%',
					'size' => 100,
				),
				'separator'   => 'before',
				'render_type' => 'ui',
				'selectors'   => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper' => 'max-width: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'minimum_height',
			array(
				'label'       => esc_html__( 'Minimum Height', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => array( 'px', '%' ),
				'range'       => array(
					'px' => array(
						'min'  => 0,
						'max'  => 1000,
						'step' => 5,
					),
					'%'  => array(
						'min' => 0,
						'max' => 100,
					),
				),
				'render_type' => 'ui',
				'selectors'   => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper' => 'min-height: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'la_marign',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'separator'  => 'before',
			)
		);
		$this->end_controls_section();
		/*JSON Animation Style end*/

		/*Iconic Box Style start*/
		$this->start_controls_section(
			'section_iconic_box_style',
			array(
				'label'     => esc_html__( 'Iconic Box', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'la_lconic_layout' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'iconic_box_padding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'iconic_box_margin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'separator'  => 'after',
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconic_box_background',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-lotties-animation-wrapper-iconic',

			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'      => 'iconic_box_border',
				'label'     => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector'  => '{{WRAPPER}} .eca-lotties-animation-wrapper-iconic',
				'separator' => 'before',
			)
		);
		$this->add_responsive_control(
			'iconic_box_br',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-lotties-animation-wrapper-iconic' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'iconic_box_shadow',
				'label'    => esc_html__( 'Box Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-lotties-animation-wrapper-iconic',
			)
		);
		$this->end_controls_section();
		/*
		Iconic Box Style end*/
		/*style end*/
	}

	protected function render() {

		$settings                     = $this->get_settings_for_display();
		$la_lconic_layout_heading     = ( ! empty( $settings['la_lconic_layout_heading'] ) ) ? $settings['la_lconic_layout_heading'] : 'no';
		$heading_tag                  = ( ! empty( $settings['heading_tag'] ) ) ? $settings['heading_tag'] : 'h2';
		$la_lconic_layout_title       = ( ! empty( $settings['la_lconic_layout_title'] ) ) ? $settings['la_lconic_layout_title'] : 'no';
		$title_tag                    = ( ! empty( $settings['title_tag'] ) ) ? $settings['title_tag'] : 'h3';
		$la_lconic_layout_description = ( ! empty( $settings['la_lconic_layout_description'] ) ) ? $settings['la_lconic_layout_description'] : 'no';
		$description_tag              = ( ! empty( $settings['description_tag'] ) ) ? $settings['description_tag'] : 'div';

		$id = uniqid( 'eca-la' );

		$la_start_time = $la_end_time = '';
		if ( ! empty( $settings['la_custom_time'] ) && $settings['la_custom_time'] == 'yes' ) {
			$la_start_time = ( $settings['la_start_time'] != '' ) ? $settings['la_start_time'] : 1;
			$la_end_time   = ( $settings['la_end_time'] != '' ) ? $settings['la_end_time'] : 100;
		}

		$la_scrollbased      = ( ! empty( $settings['la_scrollbased'] ) ) ? $settings['la_scrollbased'] : 'la_custom';
		$la_section_duration = 500;
		if ( ! empty( $settings['la_section_duration']['size'] ) ) {
			$la_section_duration = $settings['la_section_duration']['size'];
		}
		$la_section_durationTablet = ! empty( $settings['la_section_duration_tablet']['size'] ) ? $settings['la_section_duration_tablet']['size'] : $la_section_duration;
		$la_section_durationMobile = ! empty( $settings['la_section_duration_mobile']['size'] ) ? $settings['la_section_duration_mobile']['size'] : $la_section_durationTablet;

		$la_section_offset = 0;
		if ( ! empty( $settings['la_section_offset']['size'] ) ) {
			$la_section_offset = $settings['la_section_offset']['size'];
		}
		$la_section_offsetTablet = ! empty( $settings['la_section_offset_tablet']['size'] ) ? $settings['la_section_offset_tablet']['size'] : $la_section_offset;
		$la_section_offsetMobile = ! empty( $settings['la_section_offset_mobile']['size'] ) ? $settings['la_section_offset_mobile']['size'] : $la_section_offsetTablet;

		$loop = 0;
		if ( ( isset( $settings['loop'] ) && $settings['loop'] == 'true' ) ) {
			$loop = $settings['loop_counter'];
		}

		$max_width      = ( ! empty( $settings['max_width']['size'] ) ) ? $settings['max_width']['size'] . $settings['max_width']['unit'] : '100%';
		$minimum_height = ( ! empty( $settings['minimum_height']['size'] ) ) ? $settings['minimum_height']['size'] . $settings['minimum_height']['unit'] : '';
		$speed          = ( ! empty( $settings['speed']['size'] ) ) ? $settings['speed']['size'] : '0.5';

		$la_action = '';
		if ( ! empty( $settings['la_action'] ) ) {
			$la_action = $settings['la_action'];
		}
		if ( $settings['anim_renderer'] ) {
			$anim_renderer = esc_attr( $settings['anim_renderer'] );
		}

		$content_align = $settings['content_align'];
		$style_atts    = $classes = '';
		if ( $content_align ) {
			$classes .= ' align-' . $content_align;
		}
		if ( ! empty( $anim_renderer ) ) {
			$classes .= ' renderer-' . $anim_renderer;
		}

		if ( ! empty( $content_align ) && $content_align == 'right' ) {
			$style_atts .= 'margin-left: auto;';
		} elseif ( ! empty( $content_align ) && $content_align == 'center' ) {
			$style_atts .= 'margin-right: auto;';
			$style_atts .= 'margin-left: auto;';
		}

		$type = ! empty( $settings['type'] ) ? $settings['type'] : 'url';

		$eca_opt = '';
		if ( ( $type == 'url' && ! empty( $settings['la_json_url']['url'] ) ) || ( $type == 'file' && ! empty( $settings['la_json_file']['url'] ) ) ) {

			if ( $type == 'file' ) {
				$PATHINFO_EXTENSION = pathinfo( $settings['la_json_file']['url'], PATHINFO_EXTENSION );
			} else {
				$PATHINFO_EXTENSION = pathinfo( $settings['la_json_url']['url'], PATHINFO_EXTENSION );
			}

			if ( $PATHINFO_EXTENSION != 'json' ) {
				echo '<h3 class="posts-not-found">' . esc_html__( 'Opps!! Please Enter Only JSON File Extension.', 'essential-classy-addons-for-elementor' ) . '</h3>';
				return false;
			} else {
				$eca_opt = 'data-id="' . esc_attr( $id ) . '"';
				if ( $type == 'file' ) {
					$eca_opt .= ' data-path="' . esc_url( $settings['la_json_file']['url'] ) . '"';
				} else {
					$eca_opt .= ' data-path="' . esc_url( $settings['la_json_url']['url'] ) . '"';
				}
				$eca_opt .= ' data-loop="' . $loop . '"';
				$eca_opt .= ' data-anim_renderer="' . $anim_renderer . '"';
				$eca_opt .= ' data-width="' . $max_width . '"';
				$eca_opt .= ' data-height="' . $minimum_height . '"';
				$eca_opt .= ' data-playspeed="' . $speed . '"';
				$eca_opt .= ' data-play_action="' . $la_action . '"';
				$eca_opt .= ' data-la_scrollbased="' . $la_scrollbased . '"';
				$eca_opt .= ' data-la_section_duration="' . $la_section_duration . '"';
				$eca_opt .= ' data-la_section_duration_tablet="' . $la_section_durationTablet . '"';
				$eca_opt .= ' data-la_section_duration_mobile="' . $la_section_durationMobile . '"';
				$eca_opt .= ' data-la_section_offset="' . $la_section_offset . '"';
				$eca_opt .= ' data-la_section_offset_tablet="' . $la_section_offsetTablet . '"';
				$eca_opt .= ' data-la_section_offset_mobile="' . $la_section_offsetMobile . '"';
				$eca_opt .= ' data-la_start_time="' . $la_start_time . '"';
				$eca_opt .= ' data-la_end_time="' . $la_end_time . '"';

				$la_action_cstclass = ! empty( $settings['la_action_cstclass'] ) ? $settings['la_action_cstclass'] : '';
				if ( ( ! empty( $la_action ) && ( $la_action == 'hover' || $la_action == 'mouseoverout' ) ) && ! empty( $la_action_cstclass ) ) {
					$eca_opt .= ' data-la_customtrigger="' . $la_action_cstclass . '"';
				}
			}
		} else {
			echo '<h3 class="posts-not-found">' . esc_html__( 'Opps!! Please Enter JSON File Extension.', 'essential-classy-addons-for-elementor' ) . '</h3>';
		}

		$la_op = '';
		if ( ! empty( $settings['la_lconic_layout'] ) && $settings['la_lconic_layout'] == 'yes' ) {
			$la_op .= '<div class="eca-lotties-animation-wrapper-iconic eca-iconic' . esc_attr( $id ) . '">';
			if ( ! empty( $settings['la_lconic_layout_heading'] ) && $settings['la_lconic_layout_heading'] == 'yes' ) {
				if ( ! empty( $settings['heading_text'] ) ) {
					$la_op .= '<' . esc_attr( \EcafeHelper::check_and_validate_html_tag( $heading_tag ) ) . ' class="eca-iconic-heading">' . esc_attr( $settings['heading_text'] ) . '</' . esc_attr( \EcafeHelper::check_and_validate_html_tag( $heading_tag ) ) . '>';
				}
			}
			if ( ! empty( $settings['la_lconic_layout_title'] ) && $settings['la_lconic_layout_title'] == 'yes' ) {
				if ( ! empty( $settings['title_text'] ) ) {
					$la_op .= '<' . esc_attr( \EcafeHelper::check_and_validate_html_tag( $title_tag ) ) . ' class="eca-iconic-title">' . esc_attr( $settings['title_text'] ) . '</' . esc_attr( \EcafeHelper::check_and_validate_html_tag( $title_tag ) ) . '>';
				}
			}
			if ( ! empty( $settings['la_lconic_layout_description'] ) && $settings['la_lconic_layout_description'] == 'yes' ) {
				if ( ! empty( $settings['description_text'] ) ) {
					$la_op .= '<' . $description_tag . ' class="eca-iconic-description">' . wp_kses_post( $settings['description_text'] ) . '</' . $description_tag . '>';
				}
			}
		}

		if ( ( ! empty( $settings['la_link'] ) && $settings['la_link'] == 'yes' ) && ! empty( $settings['la_link_url']['url'] ) && ! empty( $settings['la_link_delay'] ) ) {
			$la_op .= '<script>(function($){"use strict";$( document ).ready(function(){$(document).on("click", "a.jbafe-lotties-link", function(e){e.preventDefault();var storeurl = this.getAttribute("href");setTimeout(function(){window.location = storeurl;}, ' . $settings['la_link_delay']['size'] . ');});});})(jQuery);</script>';
			$la_op .= '<a class="jbafe-lotties-link" href="' . esc_url( $settings['la_link_url']['url'] ) . '">';
		}

		if ( ( ! empty( $settings['la_cursor'] ) && $settings['la_cursor'] == 'yes' ) && ! empty( $settings['la_cursor_select'] ) ) {
			$style_atts .= 'cursor:' . $settings['la_cursor_select'] . ';';
		}

		$la_op .= '<div id="' . esc_attr( $id ) . '" class="eca-lotties-animation-wrapper eca-' . esc_attr( $id ) . ' ' . $classes . '"  style="' . $style_atts . '" ' . $eca_opt . '>';
		$la_op .= '</div>';

		if ( ( ! empty( $settings['la_link'] ) && $settings['la_link'] == 'yes' ) && ! empty( $settings['la_link_url']['url'] ) && ! empty( $settings['la_link_delay'] ) ) {
			$la_op .= '</a>';
		}

		if ( ! empty( $settings['la_lconic_layout'] ) && $settings['la_lconic_layout'] == 'yes' ) {
			$la_op .= '</div>';
		}

		echo wp_kses_normalize_entities( $la_op );
	}
}
