<?php
namespace Elementor;

use \Elementor\ElementsKit_Widget_timeline_Handler as Handler;
use \ElementsKit_Lite\Modules\Controls\Controls_Manager as ElementsKit_Controls_Manager;

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


class ElementsKit_Widget_timeline extends Widget_Base {
    use \ElementsKit_Lite\Widgets\Widget_Notice;

    public $base;

    public function get_name() {
        return Handler::get_name();
    }

    public function get_title() {
        return Handler::get_title();
    }

    public function get_icon() {
        return Handler::get_icon();
    }

    public function get_categories() {
        return Handler::get_categories();
    }
    
	public function get_keywords() {
		return Handler::get_keywords();
	}

    public function get_help_url() {
        return 'https://wpmet.com/doc/timeline/';
    }

    protected function is_dynamic_content(): bool {
        return false;
    }

	public function has_widget_inner_wrapper(): bool {
		return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}

	protected function register_controls()
	{
		$this->start_controls_section(
			'ekit_timeline_content_section',
			[
				'label' => esc_html__('Content', 'elementskit'),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'ekit_timeline_style',
			[
				'label' => esc_html__('Time line Style', 'elementskit'),
				'type' => Controls_Manager::SELECT,
				'default' => 'vertical',
				'options' => [
					'vertical'  => esc_html__('Vertical', 'elementskit'),
					'horizontal' => esc_html__('Horizontal', 'elementskit'),
				],
			]
		);

		$this->add_control(
			'ekit_timeline_vertical_style',
			[
				'label' => esc_html__('Content Style', 'elementskit'),
				'type' => Controls_Manager::SELECT,
				'default' => 'bothside',
				'options' => [
					'oneside'  => esc_html__('Same Side', 'elementskit'),
					'bothside' => esc_html__('Both side', 'elementskit'),
				],
				'condition' => [
					'ekit_timeline_style' => 'vertical',
				]
			]
		);

		$this->add_control(
			'ekit_timeline_horizontal_style',
			[
				'label' => esc_html__('Content Position', 'elementskit'),
				'type' => Controls_Manager::SELECT,
				'default' => 'top',
				'options' => [
					'top'  => esc_html__('Top', 'elementskit'),
					'bottom' => esc_html__('Bottom', 'elementskit'),
				],
				'condition' => [
					'ekit_timeline_style' => 'horizontal',
				],
				'render_type' => 'template',
				'prefix_class' => 'ekit-timeline-horizontal-',
				
			]
		);

		$this->add_control(
			'ekit_timeline_alignment',
			[
				'label' => esc_html__('Alignment', 'elementskit'),
				'type' => Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => esc_html__('Left', 'elementskit'),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__('Center', 'elementskit'),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__('Right', 'elementskit'),
						'icon' => 'eicon-text-align-right',
					]
				],
				'default' => 'left',
				'selectors' => [
					'{{WRAPPER}} .ekit-wid-con .timeline-area.horizantal-timeline' => 'justify-content: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'ekit_timeline_line_break',
			[
				'label' => esc_html__('Line Break', 'elementskit'),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__('Yes', 'elementskit'),
				'label_off' => esc_html__('No', 'elementskit'),
				'return_value' => 'yes',
				'default' => '',
				'condition' => [
					'ekit_timeline_style' => 'horizontal',
				],
				'selectors' => [
					'{{WRAPPER}} .ekit-wid-con .horizantal-timeline' => 'flex-wrap: wrap;',
				],
			]
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'ekit_timeline_line_subtitle',
			[
				'label' => esc_html__('Sub Title', 'elementskit'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('Subtitle', 'elementskit'),
				'label_block' => true,
				'dynamic' => [
					'active' => true,
				],
			]
		);

		$repeater->add_control(
			'ekit_timeline_line_title',
			[
				'label' => esc_html__('Title', 'elementskit'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('Title', 'elementskit'),
				'label_block' => true,
				'dynamic' => [
					'active' => true,
				],
			]
		);
		$repeater->add_control(
			'ekit_timeline_date_link',
			[
				'label' => esc_html__('Title Link', 'elementskit'),
				'type' => Controls_Manager::URL,
				'placeholder' => esc_html__('https://example.com', 'elementskit'),
				'show_external' => true,
				'default' => [
					'url' => '',
				],
				'dynamic' => [
					'active' => true,
				],
			]
		);
		$repeater->add_control(
			'ekit_timeline_line_content',
			[
				'label' => esc_html__('Description', 'elementskit'),
				'type' => Controls_Manager::TEXTAREA,
				'rows' => 5,
				'default' => esc_html__('Default description', 'elementskit'),
				'placeholder' => esc_html__('Type your description here', 'elementskit'),
				'dynamic' => [
					'active' => true,
				],
			]
		);
		$repeater->add_control(
			'ekit_timeline_title_icons',
			[
				'label' => esc_html__('Title Icon', 'elementskit'),
				'type' => Controls_Manager::ICONS,
				'fa4compatibility' => 'ekit_timeline_title_icon',
				'default' => [
					'value' => 'icon icon-trophy',
					'library' => 'ekiticons',
				],
			]
		);

		$repeater->add_control(
			'ekit_timeline_content_date',
			[
				'label' => esc_html__('Date', 'elementskit'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('01 February 2015', 'elementskit'),
				'label_block' => true,
				'separator' => 'before',
				'dynamic' => [
					'active' => true,
				],
			]
		);

		$repeater->add_control(
			'ekit_timelinehr_content_address',
			[
				'label' => esc_html__('Address', 'elementskit'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('New Office, CA', 'elementskit'),
				'label_block' => true,
				'dynamic' => [
					'active' => true,
				],
			]
		);

		$repeater->add_control(
			'ekit_timelinehr_repeater_style',
			[
				'label' => esc_html__('Repeater Item Style', 'elementskit'),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$repeater->start_controls_tabs('ekit_timeline_repeater_style_tab');

		$repeater->start_controls_tab(
			'ekit_timeline_normal_tab',
			[
				'label' => esc_html__('Normal', 'elementskit'),
			]
		);

		$repeater->add_control(
			'ekit_timelinearrow_title_color',
			[
				'label' => esc_html__('Title Color ', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} {{CURRENT_ITEM}} .timeline-item .timeline-content .title' => 'color: {{VALUE}};',
				],
			]
		);

		$repeater->add_control(
			'ekit_timelinearrow_subtitle_color',
			[
				'label' => esc_html__('Sub Title Color ', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} {{CURRENT_ITEM}} .timeline-item .timeline-content .subtitle' => 'color: {{VALUE}};',
				],
			]
		);

		$repeater->add_control(
			'ekit_timeline_item_background_color_group',
			[
				'label' => esc_html__('Content box Background', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ekit-wid-con {{CURRENT_ITEM}} .timeline-item, {{WRAPPER}} .ekit-wid-con {{CURRENT_ITEM}} .single-timeline .timeline-item .timeline-icon, {{WRAPPER}} .ekit-wid-con {{CURRENT_ITEM}} .single-timeline .timeline-item .timeline-icon' => 'background-color:{{VALUE}};',
					'{{WRAPPER}} .ekit-wid-con .vertical-timeline {{CURRENT_ITEM}}:nth-child(odd) .timeline-pin' => 'border-color: {{VALUE}} {{VALUE}} transparent transparent;',
					'{{WRAPPER}} .ekit-wid-con .vertical-timeline {{CURRENT_ITEM}}:nth-child(even) .timeline-pin' => 'border-color: transparent transparent {{VALUE}} {{VALUE}};',
					'{{WRAPPER}} .ekit-wid-con .horizantal-timeline {{CURRENT_ITEM}} .timeline-pin' => 'border-color: transparent transparent {{VALUE}} {{VALUE}};',
					'{{WRAPPER}} .ekit-wid-con .horizantal-timeline {{CURRENT_ITEM}} .pin-top' => 'border-color: {{VALUE}} {{VALUE}} transparent transparent;',
				],

			]
		);

		$repeater->add_control(
			'ekit_timeline_item_icon_color_section_title',
			[
				'label' => esc_html__('Icon section', 'elementskit'),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$repeater->add_control(
			'ekit_timeline_item_icon_color',
			[
				'label' => esc_html__('Icon Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} {{CURRENT_ITEM}} .timeline-icon i' => 'color: {{VALUE}};',
					'{{WRAPPER}} {{CURRENT_ITEM}} .timeline-icon svg path'  => 'stroke: {{VALUE}}; fill: {{VALUE}};'
				],
			]
		);

		$repeater->add_control(
			'ekit_timeline_item_icon_bg_color_group',
			[
				'label' => esc_html__('Icon Background', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}}  {{CURRENT_ITEM}} .timeline-icon' => 'background-color:{{VALUE}}',
				],

			]
		);

		$repeater->add_control(
			'ekit_timeline_hover_acitve',
			[
				'label' => esc_html__('Keep TimleLine open? ', 'elementskit'),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__('Yes', 'elementskit'),
				'label_off' => esc_html__('No', 'elementskit'),
				'return_value' => 'yes',
				'default' => 'no',
			]
		);

		$repeater->end_controls_tab();

		//  Hover style
		$repeater->start_controls_tab(
			'ekit_timeline_hover_tab',
			[
				'label' => esc_html__('Hover', 'elementskit'),
			]
		);

		$repeater->add_control(
			'ekit_timelinearrow_itle_color_hover',
			[
				'label' => esc_html__('Title Color ', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} {{CURRENT_ITEM}}:hover .timeline-item .title' => 'color: {{VALUE}}!important;',
				],
			]
		);

		$repeater->add_control(
			'ekit_timelinearrow_subtitle_color_hover',
			[
				'label' => esc_html__('Sub Title Color ', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} {{CURRENT_ITEM}}:hover .timeline-item .subtitle' => 'color: {{VALUE}}!important;',
				],
			]
		);

		$repeater->add_control(
			'ekit_timeline_item_background__hv_color_group',
			[
				'label' => esc_html__('Content box Background', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ekit-wid-con {{CURRENT_ITEM}}:hover .timeline-item, {{WRAPPER}} .ekit-wid-con {{CURRENT_ITEM}}:hover .single-timeline .timeline-item .timeline-icon, {{WRAPPER}} .ekit-wid-con {{CURRENT_ITEM}}:hover .single-timeline .timeline-item .timeline-icon' => 'background-color:{{VALUE}}',
					'{{WRAPPER}} .ekit-wid-con .vertical-timeline {{CURRENT_ITEM}}:nth-child(odd):hover .timeline-pin' => 'border-color: {{VALUE}} {{VALUE}} transparent transparent;',
					'{{WRAPPER}} .ekit-wid-con .vertical-timeline {{CURRENT_ITEM}}:nth-child(even):hover .timeline-pin' => 'border-color: transparent transparent {{VALUE}} {{VALUE}};',
					'{{WRAPPER}} .ekit-wid-con .horizantal-timeline {{CURRENT_ITEM}}:hover .timeline-pin' => 'border-color: transparent transparent {{VALUE}} {{VALUE}};',
					'{{WRAPPER}} .ekit-wid-con .horizantal-timeline {{CURRENT_ITEM}}:hover .pin-top' => 'border-color: {{VALUE}} {{VALUE}} transparent transparent;',
				],

			]
		);

		// Icon
		$repeater->add_control(
			'ekit_timeline_item_icon_color_section_title_hv',
			[
				'label' => esc_html__('Icon section', 'elementskit'),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$repeater->add_control(
			'ekit_timeline_item_icon_color_hv',
			[
				'label' => esc_html__('Icon Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} {{CURRENT_ITEM}}:hover .timeline-icon i' => 'color: {{VALUE}}',
					'{{WRAPPER}} {{CURRENT_ITEM}}:hover .timeline-icon svg path'  => 'stroke: {{VALUE}}; fill: {{VALUE}};'
				],
			]
		);

		$repeater->add_control(
			'ekit_timeline_item_icon_bg_color_hv_group',
			[
				'label' => esc_html__('Icon Background', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} {{CURRENT_ITEM}}:hover .timeline-icon' => 'background-color:{{VALUE}}',
				],

			]
		);

		$repeater->end_controls_tab();

		$repeater->end_controls_tabs();

		$this->add_control(
			'ekit_timelinehr_content_repeater',
			[
				'label' => esc_html__('Time Line Content', 'elementskit'),
				'type' => Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'ekit_timeline_line_title' => esc_html__('Title #1', 'elementskit'),
						'ekit_timeline_line_content' => esc_html__('Item content. Click the edit button to change this text.', 'elementskit'),
						'ekit_timeline_hover_acitve' => 'yes',
					],
					[
						'ekit_timeline_line_title' => esc_html__('Title #1', 'elementskit'),
						'ekit_timeline_line_content' => esc_html__('Item content. Click the edit button to change this text.', 'elementskit'),
					],
					[
						'ekit_timeline_line_title' => esc_html__('Title #1', 'elementskit'),
						'ekit_timeline_line_content' => esc_html__('Item content. Click the edit button to change this text.', 'elementskit'),
					],
				],
				'title_field' => '{{{ ekit_timeline_line_title }}}',

			]
		);

		$this->end_controls_section();

		// Settings

		$this->start_controls_section(
			'ekit_timeline_setting_section',
			[
				'label' => esc_html__('Settings', 'elementskit'),
				'tab' => Controls_Manager::TAB_CONTENT,

			]
		);
		$this->add_control(
			'ekit_timeline_date_icons',
			[
				'label' => esc_html__('Date Icon', 'elementskit'),
				'type' => Controls_Manager::ICONS,
				'fa4compatibility' => 'ekit_timeline_date_icon',
				'default' => [
					'value' => '',
				],
				'condition' => [
					'ekit_timeline_style' => 'vertical',
				]
			],

		);

		$this->add_control(
			'ekit_timelinehr_address_icons',
			[
				'label' => esc_html__(' Address Icon', 'elementskit'),
				'type' => Controls_Manager::ICONS,
				'fa4compatibility' => 'ekit_timelinehr_address_icon',
				'default' => [
					'value' => '',
				],
				'condition' => [
					'ekit_timeline_style' => 'vertical',
				]
			]
		);

		//  Item animation
		$this->add_control(
			'ekit_timeline_left_entrance_animation',
			[
				'label' => esc_html__('Content box Entrance Animation', 'elementskit'),
				'type' => Controls_Manager::ANIMATION,
			]
		);

		$this->add_control(
			'ekit_timeline_right_entrance_animation',
			[
				'label' => esc_html__('Address, date Entrance Animation', 'elementskit'),
				'type' => Controls_Manager::ANIMATION,
			]
		);

		$this->add_control(
			'ekit_timelinehr_pinpoint_icon',
			[
				'label' => esc_html__('Pinpoint Style', 'elementskit'),
				'type' => Controls_Manager::SELECT,
				'default' => 'doted',
				'options' => [
					'doted'  => esc_html__('default', 'elementskit'),
					'icon' => esc_html__('Icon', 'elementskit'),
				],
				'condition' => [
					'ekit_timeline_style' => 'vertical',
				]
			]
		);

		$this->add_control(
			'ekit_timeline_icons',
			[
				'label' => esc_html__('Pinpoint Icon', 'elementskit'),
				'type' => Controls_Manager::ICONS,
				'fa4compatibility' => 'ekit_timeline_icon',
				'default' => [
					'value' => 'icon icon-star1',
					'library' => 'ekiticons',
				],
				'condition' => [
					'ekit_timelinehr_pinpoint_icon' => 'icon',
				]
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'ekit_timeline_style_section',
			[
				'label' => esc_html__('Content', 'elementskit'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'ekit_timelinehr_alignment',
			[
				'label' => esc_html__('Alignment', 'elementskit'),
				'type' => Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => esc_html__('Left', 'elementskit'),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__('Center', 'elementskit'),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__('Right', 'elementskit'),
						'icon' => 'eicon-text-align-right',
					],
					'justify' => [
						'title' => esc_html__('justify', 'elementskit'),
						'icon' => 'eicon-text-align-justify',
					],
				],
				'default' => 'left',
				'selectors' => [
					'{{WRAPPER}} .single-timeline .timeline-content' => 'text-align: {{VALUE}} !important;',
				],
			]
		);

		$this->add_responsive_control(
			'ekit_timelinehr_icon_alignment',
			[
				'label' => esc_html__('Icon Alignment', 'elementskit'),
				'type' => Controls_Manager::CHOOSE,
				'options' => [
					'flex-start' => [
						'title' => esc_html__('Top', 'elementskit'),
						'icon' => 'eicon-v-align-top',
					],
					'center' => [
						'title' => esc_html__('Middle', 'elementskit'),
						'icon' => 'eicon-v-align-middle',
					],
					'flex-end' => [
						'title' => esc_html__('Bottom', 'elementskit'),
						'icon' => 'eicon-v-align-bottom',
					],
				],
				'default' => 'flex-start',
				'selectors' => [
					'{{WRAPPER}}  {{CURRENT_ITEM}} .timeline-item.media' => 'align-items:{{VALUE}};',
				],
				'condition' => [
					'ekit_timeline_style' => 'vertical',
				],
			]
		);

		$this->add_responsive_control(
			'ekit_timeline__container_padding',
			[
				'label' => esc_html__('Padding', 'elementskit'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .timeline-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'ekit_timeline__container_inner_padding',
			[
				'label' => esc_html__('Inner Padding', 'elementskit'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .timeline-item .timeline-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'ekit_timeline__container_border_radius',
			[
				'label' => esc_html__('Border Radius', 'elementskit'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .timeline-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'ekit_timelinearrow_inactive_title_color',
			[
				'label' => esc_html__('Inactive Title Color ', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .single-timeline .top-content .title' => 'color: {{VALUE}}!important;',
				],
				'condition'  => [
					'ekit_timeline_style' => 'horizontal',
				],
			]
		);

		$this->start_controls_tabs(
			'ekit_timeline_style_content_tabs'
		);

		$this->start_controls_tab(
			'ekit_timeline_style_content_normal_tab',
			[
				'label' => esc_html__('Normal', 'elementskit'),
			]
		);

		$this->add_control(
			'ekit_timeline_subtitle_color_nl',
			[
				'label' => esc_html__('Sub Title Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .timeline-content .subtitle' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'ekit_timeline_content__sub_title_typography',
				'label' => esc_html__('Typography', 'elementskit'),
				'selector' => '{{WRAPPER}}  .subtitle',
			]
		);

		$this->add_responsive_control(
			'ekit_timeline_content__sub_title_margin',
			[
				'label' => esc_html__('Margin', 'elementskit'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .single-timeline .subtitle' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'ekit_timeline_content__sub_title_margin_hr',
			[
				'type' => Controls_Manager::DIVIDER,
			]
		);

		$this->add_control(
			'ekit_timeline_content_title_color',
			[
				'label' => esc_html__('Title Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .single-timeline .title' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'ekit_timeline_content_title_color_a',
			[
				'label' => esc_html__('Title Anchor Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .single-timeline .title a' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'ekit_timeline_content_title_typography',
				'label' => esc_html__('Typography', 'elementskit'),
				'selector' => '{{WRAPPER}} .single-timeline .title',
			]
		);

		$this->add_responsive_control(
			'ekit_timeline_content_title_margin',
			[
				'label' => esc_html__('Margin', 'elementskit'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .single-timeline .title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'ekit_timeline_content__title_margin_hr',
			[
				'type' => Controls_Manager::DIVIDER,
			]
		);

		$this->add_control(
			'ekit_timeline_content_color',
			[
				'label' => esc_html__('Content Text Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .single-timeline .timeline-content p' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'ekit_timeline_content_typography',
				'label' => esc_html__('Typography', 'elementskit'),
				'selector' => '{{WRAPPER}} .single-timeline .timeline-content p',
			]
		);

		$this->add_responsive_control(
			'ekit_timeline_content_margin',
			[
				'label' => esc_html__('Margin', 'elementskit'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .single-timeline .timeline-content p' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'ekit_timeline_arrow_separator',
			[
				'label' => esc_html__('Arrow', 'elementskit'),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_responsive_control(
			'ekit_timeline_arrow_size',
			[
				'label' => esc_html__('Arrow Size (px)', 'elementskit'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 2,
					],
					'default' => [
						'unit' => 'px',
						'size' => 40,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .ekit-wid-con .vertical-timeline .timeline-pin' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; right: calc(-{{SIZE}}{{UNIT}} / 2); border-width: calc({{SIZE}}{{UNIT}} / 2);',
					'{{WRAPPER}} .ekit-wid-con .vertical-timeline .single-timeline:nth-child(even) .timeline-pin' => 'right: inherit; left: calc(-{{SIZE}}{{UNIT}} / 2);',
					'{{WRAPPER}} .ekit-wid-con .horizantal-timeline .single-timeline .timeline-pin' => 'top: calc(100% - {{SIZE}}{{UNIT}}/2); width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; border-width: calc({{SIZE}}{{UNIT}} / 2);',
					'{{WRAPPER}} .ekit-wid-con .horizantal-timeline .single-timeline .pin-top' => 'top: unset; bottom: calc(100% - {{SIZE}}{{UNIT}}/2);',
				],
			]
		);

		$this->add_control(
			'ekit_timeline_round_color_separator',
			[
				'label' => esc_html__('Round icon', 'elementskit'),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);
		$this->add_control(
			'ekit_timeline_icon_color',
			[
				'label' => esc_html__('Round Icon Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .timeline-icon i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .timeline-icon svg path'   => 'stroke: {{VALUE}}; fill: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'ekit_timeline_item_icon_bg_color_group',
			[
				'label' => esc_html__('Round Icon Background', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .timeline-icon' => 'background-color:{{VALUE}}',
				],

			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'ekit_tab_nav_header_box_shadow_group',
				'label' => esc_html__('Box Shadow', 'elementskit'),
				'selector' => '{{WRAPPER}} .ekit-wid-con .timeline-icon',
			]
		);

		$this->add_responsive_control(
			'ekit_timeline_icon_margin',
			[
				'label' => esc_html__('Margin', 'elementskit'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .ekit-wid-con .horizantal-timeline .timeline-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition' => [
					'ekit_timeline_style' => 'horizontal',
				]
			]
		);

		$this->add_control(
			'ekit_timeline_timeline_more_options',
			[
				'label' => esc_html__('Timeline info', 'elementskit'),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'ekit_timeline_icon_date_color',
			[
				'label' => esc_html__('Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .floating-style .single-timeline .timeline-info .date' => 'color: {{VALUE}};',
					'{{WRAPPER}} .floating-style .single-timeline .timeline-info .date a' => 'color: {{VALUE}};',
					'{{WRAPPER}} .horizantal-timeline .bottom-content .date' => 'color: {{VALUE}};',
					'{{WRAPPER}} .single-timeline .timeline-info .date svg path'    => 'stroke: {{VALUE}}; fill: {{VALUE}};'
				],
			]
		);

		$this->add_responsive_control(
			'ekit_timeline_icon_date_icon_size',
			[
				'label' => esc_html__('Icon Size', 'elementskit'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', '%'],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 100,
						'step' => 5,
					],
					'%' => [
						'min' => 1,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .single-timeline .timeline-info .date i' => 'font-size: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .single-timeline .timeline-info .date svg' => 'max-width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'ekit_timeline_icon_date_typography',
				'label' => esc_html__('Typography', 'elementskit'),
				'selector' => '{{WRAPPER}} .single-timeline .timeline-info .date, {{WRAPPER}} .horizantal-timeline .bottom-content .date',
			]
		);

		$this->add_responsive_control(
			'ekit_timeline_icon_date_margin',
			[
				'label' => esc_html__('Margin', 'elementskit'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .single-timeline .timeline-info .date' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					'{{WRAPPER}} .horizantal-timeline .bottom-content .date' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);



		$this->add_control(
			'ekit_timeline_timeline_address_head',
			[
				'label' => esc_html__('Address', 'elementskit'),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);


		$this->add_control(
			'ekit_timeline_icon_address_color',
			[
				'label' => esc_html__('Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .floating-style .single-timeline .timeline-info p' => 'color: {{VALUE}};',
					'{{WRAPPER}} .single-timeline .timeline-info p' => 'color: {{VALUE}};',
					'{{WRAPPER}} .single-timeline .timeline-info .place svg path' => 'stroke: {{VALUE}}; fill: {{VALUE}};',
				],
				'condition' => [
					'ekit_timeline_style' => 'vertical',
				]
			]
		);

		$this->add_responsive_control(
			'ekit_timeline_icon_address_icon_size',
			[
				'label' => esc_html__('Icon Size', 'elementskit'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', '%'],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 100,
						'step' => 5,
					],
					'%' => [
						'min' => 1,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .single-timeline .timeline-info .place i' => 'font-size: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .single-timeline .timeline-info .place svg' => 'max-width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'ekit_timeline_icon_address_typography',
				'label' => esc_html__('Typography', 'elementskit'),
				'selector' => '{{WRAPPER}} .single-timeline .timeline-info .place',
			]
		);

		$this->add_responsive_control(
			'ekit_timeline_icon_address_margin',
			[
				'label' => esc_html__('Margin', 'elementskit'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .single-timeline .timeline-info p' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'ekit_timeline_style_hover_tab',
			[
				'label' => esc_html__('Hover', 'elementskit'),
			]
		);

		$this->add_control(
			'ekit_timeline_subtitle_color_hv',
			[
				'label' => esc_html__('Sub Title Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .single-timeline:hover .timeline-content .subtitle' => 'color: {{VALUE}}',
					'{{WRAPPER}} .single-timeline:hover .timeline-content .subtitle' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'ekit_timeline_content_title_color_hv',
			[
				'label' => esc_html__('Title Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .single-timeline:hover .timeline-item .title' => 'color: {{VALUE}}',
					'{{WRAPPER}} .single-timeline:hover .timeline-item .title a' => 'color: {{VALUE}}',
				],
			]
		);
		$this->add_control(
			'ekit_timeline_content_title_color_a_hv',
			[
				'label' => esc_html__('Title Anchor Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .single-timeline .timeline-item .title a:hover' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'ekit_timeline_content_color_hv',
			[
				'label' => esc_html__('Content Text Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .single-timeline:hover .timeline-content p' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'ekit_timeline_icon_color_hv',
			[
				'label' => esc_html__('Round Icon Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .timeline-area .timeline-item:hover .timeline-icon>i' => 'color: {{VALUE}}',
				],
			]
		);
		$this->add_control(
			'ekit_timeline_item_icon_bg_color_group_hv',
			[
				'label' => esc_html__('Round Icon Background', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .timeline-item:hover .timeline-icon' => 'background-color:{{VALUE}}',
				],

			]
		);

		$this->add_control(
			'ekit_timeline_more_options_hover',
			[
				'label' => esc_html__('Timeline info', 'elementskit'),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'ekit_timeline_icon_date_color_hv',
			[
				'label' => esc_html__('Date', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .single-timeline:hover .timeline-info .date' => 'color: {{VALUE}}',
					'{{WRAPPER}} .single-timeline:hover .timeline-info .date a' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'ekit_timeline_icon_address_color_hv',
			[
				'label' => esc_html__('Address', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .single-timeline:hover .timeline-info p' => 'color: {{VALUE}}',

				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		// Line color

		$this->start_controls_section(
			'ekit_timeline_style_line_section',
			[
				'label' => esc_html__('Line ', 'elementskit'),
				'tab' =>   Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'ekit_timeline_line_color',
			[
				'label' => esc_html__('Line Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .timeline-bar' => 'background-color: {{VALUE}}',
					'{{WRAPPER}} .horizantal-timeline .bar' => 'background-color: {{VALUE}}',
				],
			]
		);
		$this->add_control(
			'ekit_timeline_pinpoint_separator',
			[
				'label' => esc_html__('Pinpoint', 'elementskit'),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);
		$this->add_control(
			'ekit_timeline_pin_color',
			[
				'label' => esc_html__('Pin Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .timeline-img' => 'border-color: {{VALUE}}',
					'{{WRAPPER}} .horizantal-timeline .bar .pin' => 'background-color: {{VALUE}}',
				],

				'condition' => [
					'ekit_timelinehr_pinpoint_icon' => 'doted',
				]

			]
		);

		$this->add_control(
			'ekit_timeline_pin_active_border_color',
			[
				'label' => esc_html__('Active Pin Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ekit-wid-con .horizantal-timeline .single-timeline.hover .bar .pin' => 'border-color: {{VALUE}}',
				],

				'condition' => [
					'ekit_timelinehr_pinpoint_icon' => 'doted',
				]

			]
		);

		$this->add_control(
			'ekit_timeline_pin_hover_color',
			[
				'label' => esc_html__('Pinpoint Color', 'elementskit'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .timeline-img:before' => 'background-color: {{VALUE}}',
				],

				'condition' => [
					'ekit_timelinehr_pinpoint_icon' => 'doted',
					'ekit_timeline_style' => 'vertical',
				]

			]
		);

		$this->add_responsive_control(
			'ekit_pinpoint_icon_size',
			[
				'label' => esc_html__('Pinpoint Icon Size (px)', 'elementskit'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 50,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 25,
				],

				'selectors' => [
					'{{WRAPPER}} .timeline-pin-icon :is(i, svg)' => ' font-size: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'ekit_timelinehr_pinpoint_icon' => 'icon',
				]
			]
		);

		$this->add_responsive_control(
			'ekit_pinpoint_height_widht',
			[
				'label' => esc_html__('Pinpoint Height & Width (px)', 'elementskit'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 50,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 30,
				],
				'selectors' => [
					'{{WRAPPER}} .timeline-pin-icon' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; line-height: calc({{SIZE}}{{UNIT}} - 2px);',
				],
			]
		);

		$this->start_controls_tabs(
			'ekit_timeline_line_style_tabs',
			[
				'condition' => [
					'ekit_timelinehr_pinpoint_icon' => 'icon',
				]
			]
		);

		$this->start_controls_tab(
			'ekit_timeline_line_normal_tab',
			[
				'label' => esc_html__('Normal', 'elementskit'),
			]
		);

		$this->add_control(
			'ekit_timeline_line_icon_color',
			[
				'label' => esc_html__('Icon Color', 'elementskit'),
				'type' =>  Controls_Manager::COLOR,
				'default' => '#2575fc',
				'selectors' => [
					'{{WRAPPER}} .timeline-pin-icon i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .timeline-pin-icon svg path'   => 'stroke: {{VALUE}}; fill: {{VALUE}};',
				]
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'ekit_timeline_line_icon_background_group',
				'label' => esc_html__('Background', 'elementskit'),
				'types' => ['classic', 'gradient'],
				'selector' => '{{WRAPPER}} .single-timeline .timeline-pin-icon'
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'ekit_timeline_line_icon_border',
				'label' => esc_html__('Border', 'elementskit'),
				'selector' => '{{WRAPPER}} .timeline-pin-icon'
			]
		);

		$this->add_responsive_control(
			'ekit_timeline_line_icon_border_radius',
			[
				'label' => esc_html__('Border Radius', 'elementskit'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .timeline-pin-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				]
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'ekit_timeline_line_hover_tab',
			[
				'label' => esc_html__('Hover', 'elementskit'),
			]
		);

		$this->add_control(
			'ekit_timeline_line_icon_color_hover',
			[
				'label' => esc_html__('Icon Color', 'elementskit'),
				'type' =>  Controls_Manager::COLOR,
				'default' => '#000',
				'selectors' => [
					'{{WRAPPER}} .single-timeline:hover .timeline-pin-icon i' => 'color: {{VALUE}}',
					'{{WRAPPER}} .single-timeline:hover .timeline-pin-icon svg path'   => 'stroke: {{VALUE}}; fill: {{VALUE}};',
				]
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'ekit_timeline_line_icon_background_hover_group',
				'label' => esc_html__('Background', 'elementskit'),
				'types' => ['classic', 'gradient'],
				'selector' => '{{WRAPPER}} .single-timeline:hover .timeline-pin-icon'
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'ekit_timeline_line_icon_border_hover',
				'label' => esc_html__('Border', 'elementskit'),
				'selector' => '{{WRAPPER}} .single-timeline:hover .timeline-pin-icon'
			]
		);

		$this->add_responsive_control(
			'ekit_timeline_line_icon_border_radius_hover',
			[
				'label' => esc_html__('Border Radius', 'elementskit'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .single-timeline:hover .timeline-pin-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				]
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'ekit_timeline__container_style_tab',
			[
				'label' => esc_html__('Container', 'elementskit'),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'ekit_timeline_style' => 'vertical',
					'ekit_timeline_vertical_style' => 'bothside',
				],
			]
		);




		$this->add_responsive_control(
			'ekit_timeline__container_info_margin_right',
			[
				'label' => esc_html__('Info (Address, date) Gap', 'elementskit'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', '%'],
				'range' => [
					'px' => [
						'min' => 60,
						'max' => 200,
						'step' => 1,
					],
					'%' => [
						'min' => 5,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 60,
				],
				'selectors' => [
					'{{WRAPPER}} .vertical-timeline .single-timeline:nth-child(even) .timeline-info' => 'margin-right: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .vertical-timeline .single-timeline:nth-child(odd) .timeline-info' => 'margin-left: {{SIZE}}{{UNIT}};',

				],
				'condition' => [
					'ekit_timeline_vertical_style' => 'bothside'
				]
			]
		);



		$this->add_responsive_control(
			'ekit_timeline__item_margin_bottom',
			[
				'label' => esc_html__('Item Bottom Spacing', 'elementskit'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', '%'],
				'range' => [
					'px' => [
						'min' => 30,
						'max' => 100,
						'step' => 1,
					],
					'%' => [
						'min' => 5,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 30,
				],
				'selectors' => [
					'{{WRAPPER}} .single-timeline:not(:nth-last-child(2)), {{WRAPPER}} .horizantal-timeline > .single-timeline' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'ekit_timeline_vertical_style' => 'bothside'
				]
			]
		);


		$this->end_controls_section();

		$this->insert_pro_message();
	}

    /**
     * has_animation
     * 
     * @private
     * Used for checking if 'left_animation' and 'right_animation' controls has values set
     */
    private function has_animation($dir) {
        $settings = $this->get_settings_for_display();
        $name = 'ekit_timeline_'. $dir .'_entrance_animation';

        if ( $settings[ $name ] && $settings[ $name ] !== 'none' ):
            return ' elementskit-invisible';
        endif;
        
        return '';
    }

    protected function render( ) {
        echo '<div class="ekit-wid-con" >';
            $this->render_raw();
        echo '</div>';
    }

    protected function render_raw( ) {

        $settings = $this->get_settings_for_display();
        $timeline_class = 'timeline-area';

        switch ($settings['ekit_timeline_style']) {
            case 'vertical':
                $timeline_class .= ' vertical-timeline multi-gradient floating-style';
                break;
            case 'horizontal':
                $timeline_class .= ' horizantal-timeline clearfix';
                break;
        }

        $this->add_render_attribute('timeline', 'class', $timeline_class);
        $this->add_render_attribute('timeline', 'class', $settings['ekit_timeline_vertical_style']);

      ?>
        <div <?php echo \ElementsKit_Lite\Utils::render($this->get_render_attribute_string( 'timeline' )); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped --  Displaying with Elementor content rendering ?> > 

         <?php

             $contents = $settings['ekit_timelinehr_content_repeater'];
             $count = 0;
             foreach ($contents as $content) :

            $left_entranceAnimation = [
                    '_animation' => $settings['ekit_timeline_left_entrance_animation']
            ];

              $right_entranceAnimation = [
                    '_animation' => $settings['ekit_timeline_right_entrance_animation']
            ];
            $link_before = $link_after = '';
            if ( ! empty( $content['ekit_timeline_date_link']['url'] ) ) {

                if ( ! empty( $settings['ekit_timeline_date_link']['url'] ) ) {
                    $this->add_link_attributes( 'info_link', $settings['ekit_timeline_date_link'] );
                }

                $link_before .= "<a ".$this->get_render_attribute_string( 'info_link' ).">";
                    $link_after .= '</a>';
            }

             if($settings['ekit_timeline_style'] == 'vertical') : ?>

                    <div class="single-timeline media single-timeline-count-<?php echo esc_attr(($count+1)); ?> elementor-repeater-item-<?php echo esc_attr( $content[ '_id' ] ); ?>" >
                            <div class="timeline-item media<?php echo esc_attr($this->has_animation('left')); ?>" data-settings="<?php echo esc_attr(json_encode($left_entranceAnimation)); ?>">
                                <div class="timeline-content">

                                     <?php if($content['ekit_timeline_line_subtitle'] != '') : ?>
                                        <span class="subtitle"><?php echo esc_html($content['ekit_timeline_line_subtitle']); ?></span>
                                    <?php endif; ?>

                                    <?php
                                        if($content['ekit_timeline_line_title'] != '') {
                                            if ( ! empty( $content['ekit_timeline_date_link']['url'] ) ) {
                                    ?>
                                        <h3 class="title"><a href="<?php echo esc_url( $content['ekit_timeline_date_link']['url'] ); ?>" rel="<?php echo esc_attr($content['ekit_timeline_date_link']['nofollow'] ? 'nofollow' : '' ); ?>" target="<?php echo esc_attr($content['ekit_timeline_date_link']['is_external'] ? '_blank' : '_self' ); ?>"><?php echo wp_kses(\ElementsKit_Lite\Utils::kses($content['ekit_timeline_line_title']), \ElementsKit_Lite\Utils::get_kses_array()); ?></a></h3>
                                    <?php
                                    } else { ?>
                                        <h3 class="title"><?php echo wp_kses(\ElementsKit_Lite\Utils::kses($content['ekit_timeline_line_title']), \ElementsKit_Lite\Utils::get_kses_array()); ?></h3>
                                    <?php };
                                    } ?>

                              <?php if($content['ekit_timeline_line_content'] != '') : ?>
                                    <p><?php echo wp_kses(\ElementsKit_Lite\Utils::kses($content['ekit_timeline_line_content']), \ElementsKit_Lite\Utils::get_kses_array()); ?></p>
                              <?php endif;
                              ?>



                            <?php if($settings['ekit_timeline_style'] == 'vertical' && $settings['ekit_timeline_vertical_style'] == 'oneside') : ?>

                            <div class="timeline-info timeline-info-onside<?php echo esc_attr($this->has_animation('right')); ?>" data-settings="<?php echo esc_attr(json_encode($right_entranceAnimation)); ?>">
                            <?php if($content['ekit_timeline_content_date'] != '') : ?>

                            <h4 class="date">
                                <?php
                                    Icons_Manager::render_icon( $settings['ekit_timeline_date_icons'], [ 'aria-hidden' => 'true' ] );
                                ?>
                            <?php endif;
                                if($content['ekit_timeline_content_date'] != '') :
                                echo \ElementsKit_Lite\Utils::render( esc_html( $content['ekit_timeline_content_date'] ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped --  Displaying with Elementor content rendering ?> </h4>

                            <?php endif;

                            if($content['ekit_timelinehr_content_address'] != '') : ?>

                            <p class="place">
                            <?php
                            if($settings['ekit_timelinehr_address_icons']) :
                                    Icons_Manager::render_icon( $settings['ekit_timelinehr_address_icons'], [ 'aria-hidden' => 'true' ] );
                                 endif;
                                 echo '<span> '. esc_html($content['ekit_timelinehr_content_address']).'</span>';

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

                                </div><!-- .timeline-content END -->
                                 <?php if(!empty($content['ekit_timeline_title_icons']) && $content['ekit_timeline_title_icons']['value'] != '') : ?>
                                <div class="timeline-icon">
                                <?php
                                    // new icon
                                    $migrated = isset( $content['__fa4_migrated']['ekit_timeline_title_icons'] );
                                    // Check if its a new widget without previously selected icon using the old Icon control
                                    $is_new = empty( $content['ekit_timeline_title_icon'] );
                                    if ( $is_new || $migrated ) {
                                        // new icon
                                        Icons_Manager::render_icon( $content['ekit_timeline_title_icons'], [ 'aria-hidden' => 'true' ] );
                                    } else {
                                        ?>
                                        <i class="<?php echo esc_attr($content['ekit_timeline_title_icon']); ?>" aria-hidden="true"></i>
                                        <?php
                                    }
                                ?>
                                </div>

                            <?php endif; if(!empty($content['ekit_timeline_title_icons']) && $content['ekit_timeline_title_icons']['value'] != '') : ?>
                            <div class="watermark-icon">
                                <?php
                                    // new icon
                                    $migrated = isset( $content['__fa4_migrated']['ekit_timeline_title_icons'] );
                                    // Check if its a new widget without previously selected icon using the old Icon control
                                    $is_new = empty( $content['ekit_timeline_title_icon'] );
                                    if ( $is_new || $migrated ) {
                                        // new icon
                                        Icons_Manager::render_icon( $content['ekit_timeline_title_icons'], [ 'aria-hidden' => 'true' ] );
                                    } else {
                                        ?>
                                        <i class="<?php echo esc_attr($content['ekit_timeline_title_icon']); ?>" aria-hidden="true"></i>
                                        <?php
                                    }
                                ?>
                            </div>
                            <?php endif; ?>
                              <div class="timeline-pin"></div>
                            </div><!-- .timeline-item .media END -->

                    <?php if($settings['ekit_timeline_style'] == 'vertical' && $settings['ekit_timeline_vertical_style'] == 'bothside') : ?>

                    <div class="timeline-info<?php echo esc_attr($this->has_animation('right')); ?>" data-settings="<?php echo esc_attr(json_encode($right_entranceAnimation)); ?>">
                    <?php if($content['ekit_timeline_content_date'] != '') : ?>

                    <h4 class="date">
                    <?php
                            // new icon
                            Icons_Manager::render_icon( $settings['ekit_timeline_date_icons'], [ 'aria-hidden' => 'true' ] );
                    ?>
                    <?php endif;
                    if($content['ekit_timeline_content_date'] != '') :
                     echo \ElementsKit_Lite\Utils::render( esc_html( $content['ekit_timeline_content_date'] ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped --  Displaying with Elementor content rendering ?> </h4>

                     <?php endif;

                     if($content['ekit_timelinehr_content_address'] != '') : ?>

                     <p class="place">

                     <?php if($settings['ekit_timelinehr_address_icons']) : ?>
                        <?php
                           Icons_Manager::render_icon( $settings['ekit_timelinehr_address_icons'], [ 'aria-hidden' => 'true' ] );
                        ?>

                     <?php endif;
                               echo \ElementsKit_Lite\Utils::render( esc_html( $content['ekit_timelinehr_content_address'] ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped --  Displaying with Elementor content rendering ?> </p>
                     <?php endif; ?>
                    </div>

                <?php endif;

                if($settings['ekit_timelinehr_pinpoint_icon'] == 'doted') : ?>
                    <div class="timeline-img"></div>


           <?php endif;

     if($settings['ekit_timelinehr_pinpoint_icon'] == 'icon') : ?>
        <div class="timeline-pin-icon">
            <?php
                // new icon
                $migrated = isset( $settings['__fa4_migrated']['ekit_timeline_icons'] );
                // Check if its a new widget without previously selected icon using the old Icon control
                $is_new = empty( $settings['ekit_timeline_icon'] );
                if ( $is_new || $migrated ) {
                    // new icon
                    Icons_Manager::render_icon( $settings['ekit_timeline_icons'], [ 'aria-hidden' => 'true' ] );
                } else {
                    ?>
                    <i class="<?php echo esc_attr($settings['ekit_timeline_icon']); ?>" aria-hidden="true"></i>
                    <?php
                }
            ?>
        </div>
        <?php endif; ?>

                        </div><!-- .single-timeline .media END -->
       <?php endif;


        if($settings['ekit_timeline_style'] == 'horizontal') { 
            if($settings['ekit_timeline_horizontal_style'] == 'top'){ ?>

                <div class="single-timeline <?php echo esc_attr($content['ekit_timeline_hover_acitve'] === 'yes' ? 'hover' : ''); ?> elementor-repeater-item-<?php echo esc_attr( $content[ '_id' ] ); ?>">
                        <div class="timeline-item <?php echo esc_attr($this->has_animation('left')); ?>" data-settings="<?php echo esc_attr(json_encode($left_entranceAnimation)); ?>">

                        <?php if(!empty($content['ekit_timeline_title_icons']) && $content['ekit_timeline_title_icons']['value'] != '') : ?>
                            <div class="timeline-icon">
                            <?php
                                // new icon
                                $migrated = isset( $content['__fa4_migrated']['ekit_timeline_title_icons'] );
                                // Check if its a new widget without previously selected icon using the old Icon control
                                $is_new = empty( $content['ekit_timeline_title_icon'] );
                                if ( $is_new || $migrated ) {
                                    // new icon
                                    Icons_Manager::render_icon( $content['ekit_timeline_title_icons'], [ 'aria-hidden' => 'true' ] );
                                } else {
                                    ?>
                                    <i class="<?php echo esc_attr($content['ekit_timeline_title_icon']); ?>" aria-hidden="true"></i>
                                    <?php
                                }
                            ?>
                            </div><!-- .timeline-icon END -->
                        <?php endif; ?>
                            <div class="timeline-content">

                                <?php if($content['ekit_timeline_line_subtitle'] != '') : ?>
                                    <span class="subtitle"><?php echo esc_html($content['ekit_timeline_line_subtitle']); ?></span>
                                <?php endif; ?>

                                <?php
                                    if($content['ekit_timeline_line_title'] != '') {
                                        if ( ! empty( $content['ekit_timeline_date_link']['url'] ) ) {
                                ?>
                                    <h3 class="title"><a href="<?php echo esc_url( $content['ekit_timeline_date_link']['url'] ); ?>" rel="<?php echo esc_attr($content['ekit_timeline_date_link']['nofollow'] ? 'nofollow' : '' ); ?>" target="<?php echo esc_attr($content['ekit_timeline_date_link']['is_external'] ? '_blank' : '_self' ); ?>"><?php echo wp_kses(\ElementsKit_Lite\Utils::kses($content['ekit_timeline_line_title']), \ElementsKit_Lite\Utils::get_kses_array()); ?></a></h3>
                                <?php
                                } else { ?>
                                    <h3 class="title"><?php echo wp_kses(\ElementsKit_Lite\Utils::kses($content['ekit_timeline_line_title']), \ElementsKit_Lite\Utils::get_kses_array());  ?></h3>
                                <?php };
                                } ?>

                                <?php if($content['ekit_timeline_line_content'] != '') : ?>
                                    <p><?php echo wp_kses(\ElementsKit_Lite\Utils::kses( $content['ekit_timeline_line_content'] ), \ElementsKit_Lite\Utils::get_kses_array()); ?></p>
                                <?php endif; ?>

                            </div>
                            <div class="timeline-pin"></div>
                        </div>
                        <div class="content-group text-center">
                            <div class="top-content<?php echo esc_attr($this->has_animation('right')); ?>" data-settings="<?php echo esc_attr(json_encode($right_entranceAnimation)); ?>">
                            <?php
                                if($content['ekit_timeline_line_title'] != '') {
                                    if ( ! empty( $content['ekit_timeline_date_link']['url'] ) ) {
                            ?>
                                <h3 class="title"><a href="<?php echo esc_url( $content['ekit_timeline_date_link']['url'] ); ?>" rel="<?php echo esc_attr($content['ekit_timeline_date_link']['nofollow'] ? 'nofollow' : '' ); ?>" target="<?php echo esc_attr($content['ekit_timeline_date_link']['is_external'] ? '_blank' : '_self' ); ?>"><?php echo wp_kses(\ElementsKit_Lite\Utils::kses($content['ekit_timeline_line_title']), \ElementsKit_Lite\Utils::get_kses_array()); ?></a></h3>
                            <?php
                            } else { ?>
                                <h3 class="title"><?php echo wp_kses(\ElementsKit_Lite\Utils::kses($content['ekit_timeline_line_title']), \ElementsKit_Lite\Utils::get_kses_array()); ?></h3>
                            <?php };
                            } ?>

                            </div>
                            <div class="bar">
                                <div class="pin"></div>
                            </div>
                            <?php if($content['ekit_timeline_content_date'] != '') :  ?>
                                <div class="bottom-content<?php echo esc_attr($this->has_animation('right')); ?>" data-settings="<?php echo esc_attr(json_encode($right_entranceAnimation)); ?>">
                                    <p class="date"><?php echo esc_html( $content['ekit_timeline_content_date'] ); ?></p>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                    
    <?php } else { ?>
        <div class="single-timeline <?php echo esc_attr($content['ekit_timeline_hover_acitve'] === 'yes' ? 'hover' : ''); ?> elementor-repeater-item-<?php echo esc_attr( $content[ '_id' ] ); ?>">
            
            <div class="content-group text-center">
                <?php if($content['ekit_timeline_content_date'] != '') :  ?>
                    <div class="bottom-content<?php echo esc_attr($this->has_animation('right')); ?>" data-settings="<?php echo esc_attr(json_encode($right_entranceAnimation)); ?>">
                        <p class="date"><?php echo esc_html( $content['ekit_timeline_content_date'] ); ?></p>
                    </div>
                <?php endif; ?>

                <div class="bar">
                    <div class="pin"></div>
                </div>
                
                <div class="top-content<?php echo esc_attr($this->has_animation('right')); ?>" data-settings="<?php echo esc_attr(json_encode($right_entranceAnimation)); ?>">
                <?php
                    if($content['ekit_timeline_line_title'] != '') {
                        if ( ! empty( $content['ekit_timeline_date_link']['url'] ) ) {
                ?>
                    <h3 class="title"><a href="<?php echo esc_url( $content['ekit_timeline_date_link']['url'] ); ?>" rel="<?php echo esc_attr($content['ekit_timeline_date_link']['nofollow'] ? 'nofollow' : '' ); ?>" target="<?php echo esc_attr($content['ekit_timeline_date_link']['is_external'] ? '_blank' : '_self' ); ?>"><?php echo wp_kses(\ElementsKit_Lite\Utils::kses($content['ekit_timeline_line_title']), \ElementsKit_Lite\Utils::get_kses_array()); ?></a></h3>
                <?php
                } else { ?>
                    <h3 class="title"><?php echo wp_kses(\ElementsKit_Lite\Utils::kses($content['ekit_timeline_line_title']), \ElementsKit_Lite\Utils::get_kses_array()); ?></h3>
                <?php };
                } ?>
                </div>
                
            </div>
 
            <div class="timeline-item timeline-item-horizontal-bottom <?php echo esc_attr($this->has_animation('left')); ?>" data-settings="<?php echo esc_attr(json_encode($left_entranceAnimation)); ?>">
                <div class="timeline-pin pin-top"></div> 
            <?php if(!empty($content['ekit_timeline_title_icons']) && $content['ekit_timeline_title_icons']['value'] != '') : ?>
                <div class="timeline-icon">
                <?php
                    // new icon
                    $migrated = isset( $content['__fa4_migrated']['ekit_timeline_title_icons'] );
                    // Check if its a new widget without previously selected icon using the old Icon control
                    $is_new = empty( $content['ekit_timeline_title_icon'] );
                    if ( $is_new || $migrated ) {
                        // new icon
                        Icons_Manager::render_icon( $content['ekit_timeline_title_icons'], [ 'aria-hidden' => 'true' ] );
                    } else {
                        ?>
                        <i class="<?php echo esc_attr($content['ekit_timeline_title_icon']); ?>" aria-hidden="true"></i>
                        <?php
                    }
                ?>
                </div><!-- .timeline-icon END -->
            <?php endif; ?>
                  
                <div class="timeline-content">

                    <?php if($content['ekit_timeline_line_subtitle'] != '') : ?>
                        <span class="subtitle"><?php echo esc_html($content['ekit_timeline_line_subtitle']); ?></span>
                    <?php endif; ?>

                    <?php
                        if($content['ekit_timeline_line_title'] != '') {
                            if ( ! empty( $content['ekit_timeline_date_link']['url'] ) ) {
                    ?>
                        <h3 class="title"><a href="<?php echo esc_url( $content['ekit_timeline_date_link']['url'] ); ?>" rel="<?php echo esc_attr($content['ekit_timeline_date_link']['nofollow'] ? 'nofollow' : '' ); ?>" target="<?php echo esc_attr($content['ekit_timeline_date_link']['is_external'] ? '_blank' : '_self' ); ?>"><?php echo wp_kses(\ElementsKit_Lite\Utils::kses($content['ekit_timeline_line_title']), \ElementsKit_Lite\Utils::get_kses_array()); ?></a></h3>
                    <?php
                    } else { ?>
                        <h3 class="title"><?php echo wp_kses(\ElementsKit_Lite\Utils::kses($content['ekit_timeline_line_title']), \ElementsKit_Lite\Utils::get_kses_array()); ?></h3>
                    <?php };
                    } ?>

                    <?php if($content['ekit_timeline_line_content'] != '') : ?>
                        <p><?php echo wp_kses(\ElementsKit_Lite\Utils::kses( $content['ekit_timeline_line_content'] ), \ElementsKit_Lite\Utils::get_kses_array()); ?></p>
                    <?php endif; ?>

                </div>          
            </div>

        </div>
    <?php } 
        } $count++;  endforeach;

    if($settings['ekit_timeline_style'] == 'vertical') { ?>
    <div class="timeline-bar"></div>
    <?php }
    echo "</div>";
    }
}
