<?php

namespace MasterAddons\Addons;

// Elementor Classes
use MasterAddons\Inc\Classes\Base\Master_Widget;
use \Elementor\Icons_Manager;
use \Elementor\Controls_Manager;
use \Elementor\Repeater;
use \Elementor\Group_Control_Border;
use \Elementor\Group_Control_Typography;
use \Elementor\Group_Control_Image_Size;
use \Elementor\Group_Control_Text_Shadow;
use \Elementor\Group_Control_Box_Shadow;
use \Elementor\Group_Control_Background;
use \Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use \Elementor\Core\Kits\Documents\Tabs\Global_Typography;

// Master Addons Class
use MasterAddons\Inc\Classes\Helper;
use MasterAddons\Inc\Traits\JLTMA_Swiper_Controls;
use MasterAddons\Inc\Controls\Group\JLTMA_Transition;
use MasterAddons\Inc\Admin\Config;

/**
 * Author Name: Liton Arefin
 * Author URL : https://master-addons.com
 * Date       : 10/18/19
 */

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

/**
 * Master Addons: Timeline
 */
class Timeline extends Master_Widget
{
	use JLTMA_Swiper_Controls;
	use \MasterAddons\Inc\Traits\Widget_Notice;
	use \MasterAddons\Inc\Traits\Widget_Assets_Trait;

	public function get_name()
	{
		return 'ma-timeline';
	}

	public function get_title()
	{
		return __('Timeline', 'master-addons');
	}

	public function get_icon()
	{
		return 'jltma-icon ' . Config::get_addon_icon($this->get_name());
	}
	public function get_keywords()
	{
		return ['timeline', 'post timeline', 'vertical timeline', 'horizontal timeline', 'image timeline'];
	}


	protected function register_controls()
	{

		$this->start_controls_section(
			'ma_el_timeline_section_start',
			[
				'label' => __('Timeline', 'master-addons'),
			]
		);

		// Define default free options - Pro version overrides via filter
		$timeline_type_options = apply_filters('master_addons/addons/timeline/type', [
			'timeline-post' => __('Post Timeline (Pro)', 'master-addons'),
			'custom'        => __('Custom Timeline', 'master-addons'),
		]);

		$this->add_control(
			'ma_el_timeline_type',
			[
				'label'              => __('Timeline Type', 'master-addons'),
				'type'               => Controls_Manager::SELECT,
				'default'            => 'custom',
				'options'            => $timeline_type_options,
				'frontend_available' => true,
				'description'        => Helper::upgrade_to_pro('Post Timeline on'),
			]
		);

		$this->add_control(
			'ma_el_timeline_design_type',
			[
				'label'   => __('Timeline Style', 'master-addons'),
				'type'    => Controls_Manager::SELECT,
				'options' => [
					'vertical'   => __('Vertical Timeline', 'master-addons'),
					'horizontal' => __('Horizontal Timeline', 'master-addons')
				],
				'default'   => 'vertical',
				'condition' => [
					'ma_el_timeline_type' => ['custom']
				],
				'frontend_available' => true,
			]
		);

		// Pro adds post timeline controls via this filter (see Free_Addons.php -> timeline_content_controls)
		apply_filters('master_addons/addons/timeline/content_controls', $this);

		$repeater = new Repeater();

		$repeater->start_controls_tabs('ma_el_custom_timeline_items_repeater');

		$repeater->start_controls_tab(
			'ma_el_custom_timeline_tab_content',
			[
				'label' => __('Content', 'master-addons')
			]
		);
		$repeater->add_control(
			'ma_el_custom_timeline_date_type',
			[
				'label'   => __('Show', 'master-addons'),
				'type'    => Controls_Manager::SELECT,
				'options' => [
					''       => __('Date', 'master-addons'),
					'custom' => __('Custom Label', 'master-addons'),
				],
				'default' => '',
			]
		);

		$repeater->add_control(
			'ma_el_custom_timeline_date',
			[
				'label'          => __('Date', 'master-addons'),
				'type'           => Controls_Manager::DATE_TIME,
				'dynamic'        => ['active' => true],
				'default'        => __('23 March 2020', 'master-addons'),
				'placeholder'    => __('23 March 2020', 'master-addons'),
				'label_block'    => true,
				'picker_options' => array(
					'enableTime' => false,
				),
				'condition'		=> [
					'ma_el_custom_timeline_date_type!' => 'custom',
				],
			]
		);
		$repeater->add_control(
			'ma_el_custom_timeline_date_format',
			[
				'label'   => __('Date Format', 'master-addons'),
				'type'    => Controls_Manager::SELECT,
				'options' => [
					'M j, Y' => __('Default', 'master-addons'),
					'M j, y'  => wp_date('F j, Y'),
					'M j, y'  => wp_date('M j, y'),
					'Y-m-d'   => wp_date('Y-m-d'),
					'm/d/Y'   => wp_date('m/d/Y'),
					'd/m/Y'   => wp_date('d/m/Y'),
					'custom'  => __('Custom', 'master-addons'),
				],
				'default'   => 'M j, y',
				'condition'		=> [
					'ma_el_custom_timeline_date_type!' => 'custom',
				],
			]
		);
		$repeater->add_control(
			'ma_el_custom_timeline_date_custom_format',
			[
				'label'       => __('Custom Format', 'master-addons'),
				'default'     => get_option('date_format') . ' ' . get_option('time_format'),
				'description' => sprintf('<a href="https://codex.wordpress.org/Formatting_Date_and_Time" target="_blank">%s</a>', __('Documentation on date and time formatting', 'master-addons')),
				'condition'   => [
					'ma_el_custom_timeline_date_type!' => 'custom',
					'ma_el_custom_timeline_date_format' => 'custom'
				],
			]
		);
		$repeater->add_control(
			'ma_el_custom_timeline_label',
			[
				'label'       => __('Label', 'master-addons'),
				'description' => __('Write your custom text here.', 'master-addons'),
				'type'        => Controls_Manager::TEXT,
				'default'     => '',
				'label_block'    => true,
				'condition'		=> [
					'ma_el_custom_timeline_date_type' => 'custom',
				],
			]
		);

		$repeater->add_control(
			'ma_el_custom_timeline_link',
			[
				'label'       => __('Link', 'master-addons'),
				'description' => __('Enable linking the whole card. If you have links inside the content of this card, make sure you have this disabled. Links within links are not allowed.', 'master-addons'),
				'type'        => Controls_Manager::URL,
				'dynamic'     => ['active' => true],
				'placeholder' => esc_url(home_url('/')),
				'default'     => [
					'url' => '',
				],
			]
		);

		$default_title     = '<h2>' . __('Nam commodo suscipit', 'master-addons') . '</h2>';
		$default_paragraph = '<p>' . __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo', 'master-addons') . '</p>';

		$repeater->add_control(
			'ma_el_custom_timeline_content',
			[
				'label'   => '',
				'type'    => Controls_Manager::WYSIWYG,
				'dynamic' => ['active' => true],
				'default' => $default_title . $default_paragraph,
			]
		);

		$repeater->end_controls_tab();

		$repeater->start_controls_tab('ma_el_custom_timeline_tab_media', ['label' => __('Media', 'master-addons')]);

		$repeater->add_control(
			'ma_el_custom_timeline_image',
			[
				'label'   => esc_html__('Choose Image', 'master-addons'),
				'dynamic' => ['active' => true],
				'type'    => Controls_Manager::MEDIA,
			]
		);

		$repeater->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name'    => 'ma_el_custom_timeline_image_size',   // Actually its `image_size`
				'label'   => esc_html__('Image Size', 'master-addons'),
				'default' => 'large',
				'exclude' => array('custom'),
			]
		);

		$repeater->end_controls_tab();

		// Pro adds Style tab via this filter (see Free_Addons.php -> timeline_style_controls)
		apply_filters('master_addons/addons/timeline/tabs_style_controls', $repeater);

		$repeater->end_controls_tabs();

		$this->add_control(
			'ma_el_custom_timeline_items',
			[
				'label'   => __('Items', 'master-addons'),
				'type'    => Controls_Manager::REPEATER,
				'default' => [
					[
						'ma_el_custom_timeline_date' => __('February 2, 2014', 'master-addons')
					],
					[
						'ma_el_custom_timeline_date' => __('May 10, 2015', 'master-addons')
					],
					[
						'ma_el_custom_timeline_date' => __('June 21, 2016', 'master-addons')
					],
				],
				'fields'      => $repeater->get_controls(),
				'title_field' => '{{{ ma_el_custom_timeline_date }}}',
				'condition'   => [
					'ma_el_timeline_type' => 'custom'
				]
			]
		);

		$this->end_controls_section();

		/*
		* MA Timeline: Image Style
		*/
		$this->start_controls_section(
			'section_content_navigation',
			[
				'label' => __('Navigation', 'master-addons'),
				'condition' => [
					'ma_el_timeline_design_type' => 'horizontal'
				]
			]
		);

		// Global Navigation Controls
		$this->jltma_swiper_navigation_controls();

		$this->end_controls_section();

		//  Global Swiper Control Settings
		$this->start_controls_section(
			'section_carousel_settings',
			[
				'label' => __('Carousel Settings', 'master-addons'),
				'condition' => [
					'ma_el_timeline_design_type' => 'horizontal'
				]
			]
		);

		$this->jltma_swiper_settings_controls();

		$this->end_controls_section();

		// Global Swiper Item Style
		$this->jltma_swiper_item_style_controls('timeline-carousel');

		/*
             * MA Timeline: Layout
             */

		$this->start_controls_section(
			'ma_el_timeline_section_layout',
			[
				'label' => __('Layout', 'master-addons'),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'ma_el_timeline_align',
			[
				'label'          => __('Horizontal Align', 'master-addons'),
				'type'           => Controls_Manager::SELECT,
				'label_block'    => true,
				'default'        => 'center',
				'tablet_default' => 'left',
				'mobile_default' => 'left',
				'options'        => [
					'left'    => __('Left', 'master-addons'),
					'center'  => __('Center', 'master-addons'),
					'overlay' => __('Overlay', 'master-addons'),
					'right'   => __('Right', 'master-addons'),
				],
				'prefix_class' => 'jltma-timeline-align%s--',
			]
		);

		$this->add_control(
			'ma_el_timeline_reverse',
			[
				'label'        => __('Reverse Cards Positions', 'master-addons'),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => __('Yes', 'master-addons'),
				'label_off'    => __('No', 'master-addons'),
				'return_value' => 'yes',
				'condition'    => [
					'ma_el_timeline_align' => ['center'],
				],
			]
		);

		$this->add_control(
			'ma_el_timeline_cards_align',
			[
				'label'          => __('Vertical Align', 'master-addons'),
				'type'           => Controls_Manager::CHOOSE,
				'default'        => 'top',
				'tablet_default' => 'top',
				'mobile_default' => 'top',
				'options'        => [
					'top' 		=> [
						'title' => __('Left', 'master-addons'),
						'icon'  => 'eicon-v-align-top',
					],
					'middle' 	=> [
						'title' => __('Center', 'master-addons'),
						'icon'  => 'eicon-v-align-middle',
					],
					'bottom' 	=> [
						'title' => __('Right', 'master-addons'),
						'icon'  => 'eicon-v-align-bottom',
					],
				],
				'condition' 	=> [
					'ma_el_timeline_align!' => 'overlay'
				],
				'prefix_class' => 'jltma-timeline-cards-align--',
			]
		);

		$this->add_responsive_control(
			'ma_el_timeline_horizontal_spacing',
			[
				'label'   => __('Horizontal Spacing', 'master-addons'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => '',
				],
				'range' 		=> [
					'px' 		=> [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .timeline-item .timeline-item__point,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-horz-pointer .jltma-icon' => 'margin-left: {{SIZE}}px; margin-right: {{SIZE}}px;',
				],
			]
		);

		$this->add_responsive_control(
			'ma_el_timeline_vertical_spacing',
			[
				'label'   => __('Vertical Spacing', 'master-addons'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => '',
				],
				'range' 		=> [
					'px' 		=> [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-timeline__item,
					{{WRAPPER}}.jltma-timeline-align--overlay .timeline-item__point,
					{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-horz-pointer .jltma-icon' => 'margin-bottom: {{SIZE}}px;',
				],
			]
		);

		$this->end_controls_section();

		/*
		* MA Timeline: Image Style
		*/

		$this->start_controls_section(
			'ma_el_timeline_section_images',
			[
				'label' => __('Images', 'master-addons'),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'ma_el_timeline_images_align',
			[
				'label'   => __('Alignment', 'master-addons'),
				'type'    => Controls_Manager::CHOOSE,
				'default' => 'left',
				'options' => [
					'left' 		=> [
						'title' => __('Left', 'master-addons'),
						'icon'  => 'eicon-h-align-left',
					],
					'center' 	=> [
						'title' => __('Center', 'master-addons'),
						'icon'  => 'eicon-h-align-center',
					],
					'right' 	=> [
						'title' => __('Right', 'master-addons'),
						'icon'  => 'eicon-h-align-right',
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .timeline-item .timeline-item__img' => 'text-align: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'ma_el_timeline_images_spacing',
			[
				'label'   => __('Spacing', 'master-addons'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => '',
				],
				'range' 		=> [
					'px' 		=> [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline-entry-thimbnail' => 'margin-bottom: {{SIZE}}px;',
				],
			]
		);

		$this->add_control(
			'ma_el_timeline_images_border_radius',
			[
				'label'      => __('Border Radius', 'master-addons'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors'  => [
					'{{WRAPPER}} .jltma-timeline-entry-thimbnail img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		/*
			 * MA Timeline: Posts
			 */

		$this->start_controls_section(
			'ma_el_timeline_section_posts_style',
			[
				'label'     => __('Posts', 'master-addons'),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'ma_el_timeline_type' => 'post',
				]
			]
		);

		$this->add_control(
			'ma_el_timeline_title_heading',
			[
				'label'     => __('Title', 'master-addons'),
				'type'      => Controls_Manager::HEADING,
				'condition' => [
					'ma_el_timeline_type'        => 'post',
					'ma_el_timeline_post_title!' => '',
				]
			]
		);

		$this->add_control(
			'ma_el_timeline_title_color',
			[
				'label'     => __('Title Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-title' => 'color: {{VALUE}};',
				],
				'condition'			=> [
					'ma_el_timeline_type'        => 'post',
					'ma_el_timeline_post_title!' => '',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'ma_el_timeline_titles_typography',
				'selector' => '{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-title',
				'global'   => [
					'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
				],
				'condition'			=> [
					'ma_el_timeline_type'        => 'post',
					'ma_el_timeline_post_title!' => '',
				],
			]
		);

		$this->add_control(
			'ma_el_timeline_titles_spacing',
			[
				'label'   => __('Spacing', 'master-addons'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => '',
				],
				'range' 		=> [
					'px' 		=> [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-title' => 'margin-bottom: {{SIZE}}px;',
				],
				'condition'			=> [
					'ma_el_timeline_type'        => 'post',
					'ma_el_timeline_post_title!' => '',
				],
			]
		);

		$this->add_control(
			'ma_el_timeline_excerpt_heading',
			[
				'label'     => __('Excerpt', 'master-addons'),
				'type'      => Controls_Manager::HEADING,
				'condition' => [
					'ma_el_timeline_type'         => 'post',
					'ma_el_timeline_post_title!'  => '',
					'ma_el_timeline_excerpt_type' => 'three_dots',
				]
			]
		);

		$this->add_control(
			'ma_el_timeline_excerpt_color',
			[
				'label'     => __('Excerpt Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .timeline-item__excerpt,
					{{WRAPPER}} .jltma-timeline .timeline-item__excerpt p' => 'color: {{VALUE}};',
				],
				'condition'			=> [
					'ma_el_timeline_type'         => 'post',
					'ma_el_timeline_post_title!'  => '',
					'ma_el_timeline_excerpt_type' => 'three_dots',
				],
			]
		);

		// $this->add_group_control(
		// 	Group_Control_Typography::get_type(),
		// 	[
		// 		'name'     => 'ma_el_timeline_excerpt_typography',
		// 		'selector' => '{{WRAPPER}} .jltma-timeline .timeline-item__excerpt, {{WRAPPER}} .jltma-timeline .timeline-item__excerpt p',
		// 		'global'   => [
		// 			'default' => Global_Typography::TYPOGRAPHY_TEXT,
		// 		],
		// 		'condition'			=> [
		// 			'ma_el_timeline_type'         => 'post',
		// 			'ma_el_timeline_post_title!'  => '',
		// 			'ma_el_timeline_excerpt_type' => 'three_dots',
		// 		]
		// 	]
		// );

		// $this->add_responsive_control(
		// 	'ma_el_timeline_excerpt_padding',
		// 	[
		// 		'label'      => __('Padding', 'master-addons'),
		// 		'type'       => Controls_Manager::DIMENSIONS,
		// 		'size_units' => ['px'],
		// 		'selectors'  => [
		// 			'{{WRAPPER}} .jltma-timeline .timeline-item__excerpt' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		// 		],
		// 		'condition'			=> [
		// 			'ma_el_timeline_type'         => 'post',
		// 			'ma_el_timeline_post_title!'  => '',
		// 			'ma_el_timeline_excerpt_type' => 'three_dots',
		// 		],
		// 	]
		// );

		$this->add_control(
			'ma_el_timeline_read_more_heading',
			[
				'label'     => __('Read More Button', 'master-addons'),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'ma_el_timeline_type'         => 'post',
					'ma_el_timeline_excerpt_type' => 'read_more_link',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'      => 'ma_el_timeline_read_more_typography',
				'selector'  => '{{WRAPPER}} .jltma-timeline .jltma-post-btn',
				'condition' => [
					'ma_el_timeline_type'         => 'post',
					'ma_el_timeline_excerpt_type' => 'read_more_link',
				],
			]
		);

		$this->add_responsive_control(
			'ma_el_timeline_read_more_padding',
			[
				'label'      => __('Padding', 'master-addons'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors'  => [
					'{{WRAPPER}} .jltma-timeline .jltma-post-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition' => [
					'ma_el_timeline_type'         => 'post',
					'ma_el_timeline_excerpt_type' => 'read_more_link',
				],
			]
		);

		$this->add_responsive_control(
			'ma_el_timeline_read_more_border_radius',
			[
				'label'      => __('Border Radius', 'master-addons'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors'  => [
					'{{WRAPPER}} .jltma-timeline .jltma-post-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition' => [
					'ma_el_timeline_type'         => 'post',
					'ma_el_timeline_excerpt_type' => 'read_more_link',
				],
			]
		);

		$this->start_controls_tabs(
			'ma_el_timeline_read_more_tabs',
			[
				'condition' => [
					'ma_el_timeline_type'         => 'post',
					'ma_el_timeline_excerpt_type' => 'read_more_link',
				],
			]
		);

		// Normal Tab
		$this->start_controls_tab(
			'ma_el_timeline_read_more_normal_tab',
			[
				'label' => __('Normal', 'master-addons'),
			]
		);

		$this->add_control(
			'ma_el_timeline_read_more_color',
			[
				'label'     => __('Text Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-post-btn' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'ma_el_timeline_read_more_background',
				'types'    => ['classic', 'gradient'],
				'exclude'  => ['image'],
				'selector' => '{{WRAPPER}} .jltma-timeline .jltma-post-btn',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'ma_el_timeline_read_more_border',
				'selector' => '{{WRAPPER}} .jltma-timeline .jltma-post-btn',
			]
		);

		$this->end_controls_tab();

		// Hover Tab
		$this->start_controls_tab(
			'ma_el_timeline_read_more_hover_tab',
			[
				'label' => __('Hover', 'master-addons'),
			]
		);

		$this->add_control(
			'ma_el_timeline_read_more_hover_color',
			[
				'label'     => __('Text Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-post-btn:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'ma_el_timeline_read_more_hover_background',
				'types'    => ['classic', 'gradient'],
				'exclude'  => ['image'],
				'selector' => '{{WRAPPER}} .jltma-timeline .jltma-post-btn:hover',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'ma_el_timeline_read_more_hover_border',
				'selector' => '{{WRAPPER}} .jltma-timeline .jltma-post-btn:hover',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();
		$this->end_controls_section();

		/*
		* Timeline: Cards
		*/

		$this->start_controls_section(
			'section_cards',
			[
				'label' => __('Cards', 'master-addons'),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'cards_padding',
			[
				'label'      => __('Card Padding', 'master-addons'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px'],
				'selectors'  => [
					'{{WRAPPER}} .jltma-timeline .timeline-item__content-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'cards_margin',
			[
				'label'      => __('Card Margin', 'master-addons'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px'],
				'selectors'  => [
					'{{WRAPPER}} .jltma-timeline .timeline-item__content-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'cards_content_padding',
			[
				'label'      => __('Content Padding', 'master-addons'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px'],
				'selectors'  => [
					'{{WRAPPER}} .jltma-timeline .timeline-item__content,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'cards_border_radius',
			[
				'label'      => __('Border Radius', 'master-addons'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors'  => [
					'{{WRAPPER}} .jltma-timeline .timeline-item__content-wrapper,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		// Title typography — applies to both post titles (.jltma-timeline-entry-title)
		// and custom-content headings inside the WYSIWYG card body.
		$this->add_control(
			'jltma_timeline_title_heading',
			[
				'label'     => __('Title', 'master-addons'),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'jltma_timeline_title_color',
			[
				'label'     => __('Title Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-title,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content h1,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content h2,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content h3,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content h4,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content h5,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content h6' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'jltma_timeline_title_typography',
				'label'    => __('Title Typography', 'master-addons'),
				'selector' => '{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-title,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content h1,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content h2,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content h3,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content h4,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content h5,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content h6',
				'global'   => [
					'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
				],
			]
		);

		// Content typography — applies to post excerpts and custom-content body text.
		$this->add_control(
			'jltma_timeline_content_heading',
			[
				'label'     => __('Content', 'master-addons'),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'jltma_timeline_content_color',
			[
				'label'     => __('Content Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .timeline-item__excerpt,
					{{WRAPPER}} .jltma-timeline .timeline-item__excerpt p,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content p' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'jltma_timeline_content_typography',
				'label'    => __('Content Typography', 'master-addons'),
				'selector' => '{{WRAPPER}} .jltma-timeline .timeline-item__excerpt,
					{{WRAPPER}} .jltma-timeline .timeline-item__excerpt p,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content p',
				'global'   => [
					'default' => Global_Typography::TYPOGRAPHY_TEXT,
				],
			]
		);

		$this->add_responsive_control(
			'animate_in',
			[
				'label'        => __('Animate Cards', 'master-addons'),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'animate',
				'label_on'     => __('Yes', 'master-addons'),
				'label_off'    => __('No', 'master-addons'),
				'return_value' => 'animate',
				'prefix_class' => 'jltma-timeline%s-'
			]
		);

		$this->add_group_control(
			JLTMA_Transition::get_type(),
			[
				'name'     => 'cards',
				'selector' => '{{WRAPPER}} .timeline-item__content-wrapper,
							 		{{WRAPPER}} .timeline-item__content__wysiwyg *,
							 		{{WRAPPER}} .jltma-timeline-entry-title,
							 		{{WRAPPER}} .timeline-item__meta,
							 		{{WRAPPER}} .timeline-item__excerpt,
									{{WRAPPER}} .timeline-item__card__arrow::after',
				'separator' => '',
			]
		);

		$this->start_controls_tabs('tabs_cards');

		$this->start_controls_tab('tab_cards_default', ['label' => __('Default', 'master-addons')]);

		$this->add_responsive_control(
			'cards_color',
			[
				'label'     => __('Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .timeline-item__content-wrapper,
					{{WRAPPER}} .jltma-timeline .timeline-item__content-wrapper *,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content *' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'cards_background_color',
			[
				'label'     => __('Background Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .timeline-item__content-wrapper' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .jltma-timeline .timeline-item__card .timeline-item__card__arrow::after' => 'border-left-color: {{VALUE}}; border-right-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'cards_box_shadow',
				'selector' => '{{WRAPPER}} .jltma-timeline .timeline-item__content-wrapper',
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'     => 'cards_text_shadow',
				'selector' => '{{WRAPPER}} .jltma-timeline .timeline-item__content-wrapper, {{WRAPPER}} .jltma-timeline .timeline-item__content-wrapper *',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab('tab_cards_hover', ['label' => __('Hover', 'master-addons')]);

		$this->add_responsive_control(
			'cards_color_hover',
			[
				'label'     => __('Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:hover .timeline-item__content-wrapper,
					{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:hover .timeline-item__content-wrapper *,
					{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:hover .jltma-timeline-entry-content,
					{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:hover .jltma-timeline-entry-content *,
					{{WRAPPER}} .jltma-timeline .timeline-item__content-wrapper:hover,
					{{WRAPPER}} .jltma-timeline .timeline-item__content-wrapper:hover *,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content:hover,
					{{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content:hover *' => 'color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_responsive_control(
			'cards_background_color_hover',
			[
				'label'     => __('Background Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:not(.is--focused):hover .timeline-item__content-wrapper,
					{{WRAPPER}} .jltma-timeline .timeline-item__content-wrapper:hover' => 'background-color: {{VALUE}} !important;',
					'{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:not(.is--focused):hover .timeline-item__card .timeline-item__card__arrow::after' => 'border-left-color: {{VALUE}} !important; border-right-color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'cards_box_shadow_hover',
				'selector' => '{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:hover .timeline-item__content-wrapper, {{WRAPPER}} .jltma-timeline .timeline-item__content-wrapper:hover',
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'     => 'cards_text_shadow_hover',
				'selector' => '{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:hover .timeline-item__content-wrapper, {{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:hover .timeline-item__content-wrapper *',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab('tab_cards_focused', ['label' => __('Focused', 'master-addons')]);

		$this->add_responsive_control(
			'cards_color_focused',
			[
				'label'     => __('Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .timeline-item__content-wrapper,
					{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .timeline-item__content-wrapper *,
					{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .jltma-timeline-entry-content,
					{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .jltma-timeline-entry-content *' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'cards_background_color_focused',
			[
				'label'     => __('Background Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .timeline-item__content-wrapper' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .timeline-item__card__arrow::after' => 'border-left-color: {{VALUE}}; border-right-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'cards_box_shadow_focused',
				'selector' => '{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .timeline-item__content-wrapper',
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'     => 'cards_text_shadow_focused',
				'selector' => '{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .timeline-item__content-wrapper, {{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .timeline-item__content-wrapper *',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'cards_typography',
				'selector' => '{{WRAPPER}} .jltma-timeline .timeline-item__content-wrapper, {{WRAPPER}} .jltma-timeline .jltma-timeline-entry-content',
				'global'   => [
					'default' => Global_Typography::TYPOGRAPHY_TEXT,
				],
				'condition'		=> [
					'post_skin' => 'default',
				],
				'separator' => 'before',
			]
		);

		$this->end_controls_section();

		/*
		* Timeline Style: Arrow
		 */
		$this->start_controls_section(
			'section_arrow',
			[
				'label' => __('Arrow', 'master-addons'),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'arrow_background',
			[
				'label'  => __('Arrow Color', 'master-addons'),
				'type'   => Controls_Manager::COLOR,
				'default' => '#f7f7f7',
				'selectors' => [
					'{{WRAPPER}} .timeline-item__card__arrow:after' => 'border-left-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();

		/*
		* Timeline Style: Dates
		 */
		$this->start_controls_section(
			'section_dates',
			[
				'label' => __('Dates', 'master-addons'),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);


		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'ma_el_timeline_date_typography',
				'selector' => '{{WRAPPER}} .jltma-timeline .jltma-timeline-post-date',
				'global'   => [
					'default' => Global_Typography::TYPOGRAPHY_TEXT,
				],
			]
		);		

		$this->add_responsive_control(
			'dates_padding',
			[
				'label'      => __('Padding', 'master-addons'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px'],
				'selectors'  => [
					'{{WRAPPER}} .jltma-timeline .timeline-item__meta' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'dates_margin',
			[
				'label'      => __('Margin', 'master-addons'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px'],
				'selectors'  => [
					'{{WRAPPER}} .jltma-timeline .timeline-item__meta' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'     => 'dates_text_shadow',
				'selector' => '{{WRAPPER}} .jltma-timeline .timeline-item__meta',
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'dates_typography',
				'selector' => '{{WRAPPER}} .jltma-timeline .timeline-item__meta',
				'global'   => [
					'default' => Global_Typography::TYPOGRAPHY_ACCENT,
				],
			]
		);

		$this->start_controls_tabs('tabs_dates_style');

		$this->start_controls_tab('tab_dates_default', ['label' => __('Default', 'master-addons')]);

		$this->add_responsive_control(
			'dates_color',
			[
				'label'     => __('Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .timeline-item__meta' => 'color: {{VALUE}};',
				],
			]
		);


		// Date background color (Default) is a Pro control, injected here via filter.
		// See MasterAddons\Pro\Classes\Free_Addons::timeline_dates_default_bg_color().
		apply_filters('master_addons/addons/timeline/dates_default_bg_color', $this);

		$this->end_controls_tab();

		$this->start_controls_tab('tab_dates_hover', ['label' => __('Hover', 'master-addons')]);

		$this->add_responsive_control(
			'dates_color_hover',
			[
				'label'     => __('Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-timeline__item:hover .timeline-item__meta' => 'color: {{VALUE}};',
				],
			]
		);

		// Date background color (Hover) is a Pro control, injected here via filter.
		// See MasterAddons\Pro\Classes\Free_Addons::timeline_dates_hover_bg_color().
		apply_filters('master_addons/addons/timeline/dates_hover_bg_color', $this);

		$this->end_controls_tab();

		$this->start_controls_tab('tab_dates_focused', ['label' => __('Focused', 'master-addons')]);

		$this->add_responsive_control(
			'dates_color_focused',
			[
				'label'     => __('Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-timeline__item.is--focused .timeline-item__meta' => 'color: {{VALUE}};',
				],
			]
		);
		// Date background color (Focused) is a Pro control, injected here via filter.
		// See MasterAddons\Pro\Classes\Free_Addons::timeline_dates_focused_bg_color().
		apply_filters('master_addons/addons/timeline/dates_focused_bg_color', $this);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		/*
		* Timeline Style: Line
		 */

		$this->start_controls_section(
			'section_line',
			[
				'label' => __('Line', 'master-addons'),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'line_background',
			[
				'label'  => __('Background Color', 'master-addons'),
				'type'   => Controls_Manager::COLOR,
				'global' => [
					'default' => Global_Colors::COLOR_SECONDARY,
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline__line,
					{{WRAPPER}} .jltma-timeline-horz-pointer:before' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'progress_background',
			[
				'label'  => __('Progress Color', 'master-addons'),
				'type'   => Controls_Manager::COLOR,
				'global' => [
					'default' => Global_Colors::COLOR_PRIMARY,
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline__line__inner' => 'background-color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_control(
			'line_thickness',
			[
				'label'   => __('Thickness', 'master-addons'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 4,
				],
				'range' 		=> [
					'px' 		=> [
						'min' => 1,
						'max' => 8,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline__line' => 'width: {{SIZE}}px;',
					'{{WRAPPER}} .jltma-timeline-horz-pointer:before' => 'height: {{SIZE}}px;',
				],
			]
		);

		$this->add_control(
			'line_location',
			[
				'label'   => __('Location', 'master-addons'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 0,
				],
				'range' 		=> [
					'px' 		=> [
						'min' => 0,
						'max' => 100,
					],
				],
				'frontend_available' => true,
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'line_border',
				'label'    => __('Image Border', 'master-addons'),
				'selector' => '{{WRAPPER}} .jltma-timeline__line',
			]
		);

		$this->add_control(
			'line_border_radius',
			[
				'label'      => __('Border Radius', 'master-addons'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors'  => [
					'{{WRAPPER}} .jltma-timeline__line' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		/*
             * MA Timeline: Points
             */

		$this->start_controls_section(
			'ma_el_timeline_section_points',
			[
				'label' => __('Points', 'master-addons'),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'ma_el_timeline_points_content',
			[
				'label'     => __('Type', 'master-addons'),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'icons',
				'separator' => 'after',
				'options'   => [
					'default' => __('Default', 'master-addons'),
					'icons'   => __('Icons', 'master-addons'),
					'image'   => __('Image', 'master-addons'),
					'numbers' => __('Numbers', 'master-addons'),
					'letters' => __('Letters', 'master-addons'),
				]
			]
		);

		$this->add_control(
			'ma_el_timeline_points_image',
			[
				'label'     => __('Pointer Image', 'master-addons'),
				'dynamic'   => ['active' => true],
				'type'      => Controls_Manager::MEDIA,
				'condition' => [
					'ma_el_timeline_points_content' => "image"
				],
			]
		);

		$this->add_control(
			'ma_el_timeline_selected_global_icon',
			[
				'label'            => __('Icon', 'master-addons'),
				'type'             => Controls_Manager::ICONS,
				'label_block'      => true,
				'fa4compatibility' => 'global_icon',
				'default'          => [
					'value'   => 'dashicons dashicons-calendar',
					'library' => 'dashicons',
				],
				'condition'			=> [
					'ma_el_timeline_points_content' => 'icons',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'      => 'ma_el_timeline_points_typography',
				'selector'  => '{{WRAPPER}} .jltma-timeline .jltma-timeline-post-type-icon',
				'global'    => [
					'default' => Global_Typography::TYPOGRAPHY_TEXT,
				],
				'exclude'   => ['font_size'],
				'condition' => [
					'ma_el_timeline_points_content!' => 'icons',
				],
			]
		);

		//			$this->add_group_control(
		//				JLTMA_Transition::get_type(),
		//				[
		//					'name' 		=> 'ma_el_timeline_points',
		//					'selector' 	=> '{{WRAPPER}} .jltma-timeline-post-type-icon',
		//					'separator'	=> '',
		//				]
		//			);

		$this->start_controls_tabs('ma_el_timeline_tabs_points');

		$this->start_controls_tab('ma_el_timeline_points_default', ['label' => __('Default', 'master-addons')]);

		$this->add_responsive_control(
			'ma_el_timeline_points_size',
			[
				'label'   => __('Size', 'master-addons'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 40,
				],
				'range' 		=> [
					'px' 		=> [
						'min' => 10,
						'max' => 80,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-timeline-post-type-icon'                              => 'width: {{SIZE}}px; height: {{SIZE}}px',
					'{{WRAPPER}} .jltma-timeline .jltma-timeline-post-mini-thumb'                             => 'width: {{SIZE}}px; height: {{SIZE}}px',
					'{{WRAPPER}} .jltma-timeline-align--left .jltma-timeline__line'           => 'margin-left: calc( {{SIZE}}px / 2 );',
					'{{WRAPPER}} .jltma-timeline-align--right .jltma-timeline__line'          => 'margin-right: calc( {{SIZE}}px / 2 );',
					'(tablet){{WRAPPER}} .jltma-timeline-align--center .jltma-timeline__line' => 'margin-left: calc( {{points_size_tablet.SIZE}}px / 2 );',
					'(mobile){{WRAPPER}} .jltma-timeline-align--center .jltma-timeline__line' => 'margin-left: calc( {{points_size_mobile.SIZE}}px / 2 );',
				],
			]
		);

		$this->add_responsive_control(
			'ma_el_timeline_icons_size',
			[
				'label'   => __('Icon Size', 'master-addons'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 1,
				],
				'range' 		=> [
					'px' 		=> [
						'step' => 0.1,
						'min'  => 1,
						'max'  => 4,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-timeline-post-type-icon' => 'font-size: {{SIZE}}em',
					'{{WRAPPER}} .jltma-timeline .jltma-timeline-post-type-icon svg' => 'font-size: {{SIZE}}em',
				],
				'condition'		=> [
					'ma_el_timeline_points_content' => 'icons'
				]
			]
		);

		$this->add_responsive_control(
			'ma_el_timeline_content_size',
			[
				'label'   => __('Content Size', 'master-addons'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 1,
				],
				'range' 		=> [
					'px' 		=> [
						'min' => 1,
						'max' => 4,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-timeline-post-type-icon.timeline-item__point__text' => 'font-size:{{SIZE}}em;',
				],
				'condition'		=> [
					'ma_el_timeline_points_content!' => 'icons',
				]
			]
		);

		$this->add_control(
			'ma_el_timeline_points_background',
			[
				'label'  => __('Background Color', 'master-addons'),
				'type'   => Controls_Manager::COLOR,
				'global' => [
					'default' => Global_Colors::COLOR_SECONDARY,
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-timeline-post-type-icon'   => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .jltma-timeline .jltma-timeline-post-mini-thumb' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'ma_el_timeline_icons_color',
			[
				'label'     => __('Points Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-timeline-post-type-icon' => 'color: {{VALUE}};',
					'{{WRAPPER}} .jltma-timeline .jltma-timeline-post-type-icon svg' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'     => 'ma_el_timeline_points_text_shadow',
				'selector' => '{{WRAPPER}} .jltma-timeline .jltma-timeline-post-type-icon',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab('ma_el_timeline_points_hover', ['label' => __('Hover', 'master-addons')]);

		$this->add_control(
			'ma_el_timeline_points_size_hover',
			[
				'label'   => __('Scale', 'master-addons'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 1,
				],
				'range' 		=> [
					'px' 		=> [
						'min'  => 0.5,
						'max'  => 2,
						'step' => 0.01
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:hover .jltma-timeline-post-type-icon,
					{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:hover .jltma-timeline-post-mini-thumb' => 'transform: scale({{SIZE}})',
				],
			]
		);

		$this->add_control(
			'ma_el_timeline_points_background_hover',
			[
				'label'     => __('Background Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:hover .jltma-timeline-post-type-icon,
					{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:hover .jltma-timeline-post-mini-thumb' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'ma_el_timeline_icons_color_hover',
			[
				'label'     => __('Points Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:hover .jltma-timeline-post-type-icon' => 'color: {{VALUE}};',
					'{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:hover .jltma-timeline-post-type-icon svg' => 'fill: {{VALUE}};'
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'     => 'ma_el_timeline_points_text_shadow_hover',
				'selector' => '{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post:hover .jltma-timeline-post-type-icon'
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab('ma_el_timeline_points_focused', ['label' => __('Focused', 'master-addons')]);

		$this->add_control(
			'ma_el_timeline_points_size_focused',
			[
				'label'   => __('Scale', 'master-addons'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 1,
				],
				'range' 		=> [
					'px' 		=> [
						'min'  => 0.5,
						'max'  => 2,
						'step' => 0.01
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .jltma-timeline-post-type-icon,
					{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .jltma-timeline-post-mini-thumb' => 'transform: scale({{SIZE}})',
				],
			]
		);

		$this->add_control(
			'ma_el_timeline_points_background_focused',
			[
				'label'   => __('Background Color', 'master-addons'),
				'type'    => Controls_Manager::COLOR,
				'default' => '',
				'global'  => [
					'default' => Global_Colors::COLOR_PRIMARY,
				],
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .jltma-timeline-post-type-icon,
					{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .jltma-timeline-post-mini-thumb' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'ma_el_timeline_icons_color_focused',
			[
				'label'     => __('Points Color', 'master-addons'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .jltma-timeline-post-type-icon' => 'color: {{VALUE}};',
					'{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .jltma-timeline-post-type-icon svg' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'     => 'ma_el_timeline_points_text_shadow_focused',
				'selector' => '{{WRAPPER}} .jltma-timeline .jltma-blog-timeline-post.is--focused .jltma-timeline-post-type-icon',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		// Global Navigation Style Controls
		$this->start_controls_section(
			'section_style_navigation',
			[
				'label'      => __(
					'Navigation',
					'master-addons'
				),
				'tab'        => Controls_Manager::TAB_STYLE,
				'conditions' => [
					'relation' => 'or',
					'terms'    => [
						[
							'name'     => 'navigation',
							'operator' => '!=',
							'value'    => 'none',
						],
						[
							'name'     => 'ma_el_timeline_design_type',
							'operator' => '==',
							'value'    => 'horizontal',
						],
						[
							'name'  => 'show_scrollbar',
							'value' => 'yes',
						],
					],
				],
			]
		);

		// Global Navigation Style Controls
		$this->jltma_swiper_navigation_style_controls('timeline-carousel');

		$this->add_group_control(
			JLTMA_Transition::get_type(),
			[
				'name' 			=> 'arrows',
				'selector' 		=> '{{WRAPPER}} .jltma-swiper__button',
				'condition'		=> [
					'carousel_arrows'         => 'yes'
				]
			]
		);

		$this->end_controls_section();

		// Help Docs section (links from config.php)
		$this->jltma_help_docs();

		$this->upgrade_to_pro_message();
	}

	protected function jltma_el_timeline_global_render_attributes()
	{
		$settings = $this->get_settings_for_display();

		$unique_id = implode('-', [$this->get_id(), get_the_ID()]);

		$solid_bg_class = ($settings['ma_el_timeline_design_type'] === "horizontal") ? "solid-bg-color" : "";

		$this->add_render_attribute([
			'ma_el_timeline_wrapper' => [
				'class' =>			[
					'jltma-timeline',
					'jltma-timeline--' . esc_attr($settings['ma_el_timeline_design_type']),
					'jltma-timeline-' . esc_attr($settings['ma_el_timeline_type']),
					'elementor-jltma-elmaement-' . esc_attr($unique_id),
					$solid_bg_class
				]
			],
			'ma_el_timeline_posts' => [
				'class' => [
					'jltma-blog-timeline-post',
					'jltma-timeline__item',
					'timeline-item',
				],
			],
			'item' => [
				'class' => [
					'jltma-timeline__item',
					'timeline-item',
				],
			],
			'icon-wrapper' => [
				'class' => [
					'jltma-icon',
					'jltma-timeline-post-type-icon',
					'jltma-icon-support--svg',
					'jltma-timeline__item__icon',
				],
			],
			'line' => [
				'class' => 'jltma-timeline__line',
			],
			'line-inner' => [
				'class' => 'jltma-timeline__line__inner',
			],
			'card-wrapper' => [
				'class' => 'timeline-item__card-wrapper',
			],
			'point' => [
				'class' => 'timeline-item__point',
			],
			'meta' => [
				'class' => 'timeline-item__meta',
			],
			'image' => [
				'class' => [
					'timeline-item__img',
					'jltma-post__thumbnail',
					'jltma-timeline-entry-thimbnail'
				],
			],
			'content' => [
				'class' => 'timeline-item__content',
			],
			'arrow' => [
				'class' => 'timeline-item__card__arrow',
			],
			'meta-wrapper' => [
				'class' => 'timeline-item__meta-wrapper',
			],
		]);
	}

	protected function jltma_render_line()
	{ ?>
		<div <?php echo $this->get_render_attribute_string('line'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
			<div <?php echo $this->get_render_attribute_string('line-inner'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>></div>
		</div>
	<?php
	}

	protected function render()
	{
		$settings = $this->get_settings_for_display();

		$this->jltma_el_timeline_global_render_attributes();

		if (get_query_var('paged')) {
			$paged = get_query_var('paged');
		} elseif (get_query_var('page')) {
			$paged = get_query_var('page');
		} else {
			$paged = 1;
		}

		$ma_el_timeline_type  = $settings['ma_el_timeline_type'];
		$timeline_layout_type = $settings['ma_el_timeline_design_type'];

		// Post Timeline Pro settings - check if Pro controls exist
		$timeline_pro_features = apply_filters('master_addons/addons/timeline/pro_features', []);
		if (in_array('post', $timeline_pro_features) && isset($settings['ma_el_blog_posts_per_page'])) {

			$settings[] = $settings['ma_el_blog_posts_per_page'];

			$offset = $settings['ma_el_timeline_post_offset'];

			$post_per_page = $settings['ma_el_blog_posts_per_page'];

			$new_offset = $offset + (($paged - 1) * $post_per_page);

			$post_args = Helper::jltma_el_blog_get_post_settings($settings);

			$posts = Helper::jltma_el_blog_get_post_data($post_args, $paged, $new_offset);
		}
	?>
		<div <?php echo $this->get_render_attribute_string('ma_el_timeline_wrapper'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>

			<?php
			if ($settings['ma_el_timeline_design_type'] !== 'horizontal') {

				$this->jltma_render_line();

				if ('yes' === $settings['ma_el_timeline_reverse']) { ?>
					<span>

					</span>
				<?php
				}
			}

			if ($ma_el_timeline_type == "post") {

				$this->jltma_post_timeline();
			} elseif ($ma_el_timeline_type == "custom") {

				// Vertical Layout Design & Custom Layout
				if ($timeline_layout_type == "vertical") {

					$this->jltma_vertical_timeline();
				} elseif ($timeline_layout_type == "horizontal") {

					// If Custom and Vertical Horizontal Design
					$this->jltma_horizontal_timeline();
				}
			} ?>

		</div>
	<?php
		}

		protected function jltma_post_timeline()
		{
			if (get_query_var('paged')) {
				$paged = get_query_var('paged');
			} elseif (get_query_var('page')) {
				$paged = get_query_var('page');
			} else {
				$paged = 1;
			}

			$settings = $this->get_settings_for_display();
			$posts = []; // Initialize posts array

			// Post Timeline Pro settings - check if Pro controls exist
			$timeline_pro_features = apply_filters('master_addons/addons/timeline/pro_features', []);
			if (in_array('post', $timeline_pro_features) && isset($settings['ma_el_blog_posts_per_page'])) {

				$settings[] = $settings['ma_el_blog_posts_per_page'];

				$offset = $settings['ma_el_timeline_post_offset'];

				$post_per_page = $settings['ma_el_blog_posts_per_page'];

				$new_offset = $offset + (($paged - 1) * $post_per_page);

				$post_args = Helper::jltma_el_blog_get_post_settings($settings);

				$posts = Helper::jltma_el_blog_get_post_data($post_args, $paged, $new_offset);
			}

			if (count($posts)) {
				global $post;
				foreach ($posts as $post) {
					setup_postdata($post);
					$this->jltma_post_query_timeline();
					wp_reset_postdata();
				}
			}
		}
		public function jltma_vertical_timeline()
		{
			$settings = $this->get_settings_for_display();

			$j = 0;
			foreach ($settings['ma_el_custom_timeline_items'] as $index => $item) {
				$j++;
				$active_class = ($j == 1) ? "active" : "";

				$card_tag      = 'div';
				$item_key      = $this->get_repeater_setting_key('item', 'ma_el_custom_timeline_items', $index);
				$card_key      = $this->get_repeater_setting_key('card', 'ma_el_custom_timeline_items', $index);
				$point_content = '';
				$wysiwyg_key   = $this->get_repeater_setting_key('content', 'ma_el_custom_timeline_items', $index);
				$meta_key      = $this->get_repeater_setting_key('date', 'ma_el_custom_timeline_items', $index);

				$this->add_render_attribute([
					$item_key => [
						'class' => [
							'elementor-repeater-item-' . esc_attr($item['_id']),
							'jltma-blog-timeline-post',
							'jltma-timeline__item',
							'timeline-item',
							$active_class
						],
					],
					$card_key => [
						'class' => 'timeline-item__card',
					],
					$wysiwyg_key => [
						'class' => 'jltma-timeline-entry-content',
					],
					$meta_key => [
						'class' => [
							'timeline-item__meta',
							'meta',
						],
					],
				]);

				if (!empty($item['ma_el_custom_timeline_link']['url'])) {
					$card_tag = 'a';

					$this->add_render_attribute($card_key, 'href', $item['ma_el_custom_timeline_link']['url']);

					if ($item['ma_el_custom_timeline_link']['is_external']) {
						$this->add_render_attribute($card_key, 'target', '_blank');
					}

					if ($item['ma_el_custom_timeline_link']['nofollow']) {
						$this->add_render_attribute($card_key, 'rel', 'nofollow');
					}
				}

				// Custom style points - check if Pro controls exist
				if (isset($item['ma_el_custom_timeline_custom_style']) && $item['ma_el_custom_timeline_custom_style'] === 'yes' && isset($item['ma_el_custom_timeline_point_content_type']) && $item['ma_el_custom_timeline_point_content_type'] !== '') {
					$point_content_type = $item['ma_el_custom_timeline_point_content_type'];

					switch ($point_content_type) {
						case 'numbers':
							$point_content = $this->jltma_timeline_points_text($point_content_type, $index, $item);
							break;

						case 'letters':
							$point_content = $this->jltma_timeline_points_text($point_content_type, $index, $item);
							break;

						case 'image':
							$point_content = $this->jltma_timeline_points_image($item);
							break;

						case 'icons':
							$point_content = $this->jltma_timeline_points_icon($item);
							break;

						default:
							$point_content = '<div class="jltma-timeline-post-type-icon jltma-timeline__item__icon"><span class="jltma-timeline-circle"></span></div>';
					}
				} else {
					$point_content = $this->jltma_timeline_points_global_points();
				}
	?>
		<div <?php echo $this->get_render_attribute_string($item_key); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
			<div <?php echo $this->get_render_attribute_string('point'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
				<?php echo wp_kses_post( $this->parse_text_editor($point_content) ); ?>
			</div>
			<div <?php echo $this->get_render_attribute_string('card-wrapper'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
				<div class="jltma-timeline-post-inner">
					<<?php echo esc_attr($card_tag); ?> <?php echo $this->get_render_attribute_string($card_key); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
						<div class="timeline-item__content-wrapper">

							<?php if ($item['ma_el_custom_timeline_image']['url']) { ?>
								<div <?php echo $this->get_render_attribute_string('image'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
									<?php echo Group_Control_Image_Size::get_attachment_image_html($item, 'ma_el_custom_timeline_image'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_attachment_image_html returns safe Elementor HTML ?>
								</div>
							<?php } ?>

							<?php $this->render_custom_card_meta($index, $item); ?>

							<div <?php echo $this->get_render_attribute_string($wysiwyg_key); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
								<?php echo wp_kses_post( $this->parse_text_editor($item['ma_el_custom_timeline_content']) ); ?>
							</div>
							<?php $this->render_card_arrow(); ?>
						</div><!-- /.post -->
					</<?php echo esc_attr($card_tag); ?>>
				</div><!-- /.jltma-timeline-post-inner -->
			</div> <!-- card-wrapper -->
			<div <?php echo $this->get_render_attribute_string('meta-wrapper'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
				<?php $this->render_custom_card_meta($index, $item); ?>
			</div>
		</div>

	<?php } ?>

<?php }

		protected function render_image($item = false)
		{
			call_user_func([$this, 'render_' . $this->get_settings('ma_el_timeline_type') . '_thumbnail'], $item);
		}

		protected function render_custom_thumbnail($item)
		{
			if ('' === $item['ma_el_custom_timeline_image']['url'])
				return;

?>
	<div <?php echo $this->get_render_attribute_string('image'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
		<?php
			echo Group_Control_Image_Size::get_attachment_image_html($item); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_attachment_image_html returns safe Elementor HTML
		?></div>
<?php
		}

		protected function render_card_arrow()
		{ ?>
	<div <?php echo $this->get_render_attribute_string('arrow'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>></div>
<?php }

		protected function render_custom_card_meta($index, $item)
		{
			// $settings = $this->get_settings_for_display();

			$meta_key = $this->get_repeater_setting_key('date', 'ma_el_custom_timeline_items', $index);

			// $this->add_inline_editing_attributes($meta_key, 'basic');

			$this->add_render_attribute([
				$meta_key => [
					'class' => [
						'timeline-item__meta',
						'meta',
					],
				],
			]);

?>
	<div <?php echo $this->get_render_attribute_string($meta_key); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
		<?php
			// $item_date = $this->parse_text_editor($item['ma_el_custom_timeline_date']);
			// echo date($settings['ma_el_timeline_date_format'], strtotime($item_date));
			if ($item['ma_el_custom_timeline_date_type'] == 'custom') {
				echo wp_kses_post( $this->parse_text_editor($item['ma_el_custom_timeline_label']) );
			} else {
				$date = $this->get_date_formatted(true, $item['ma_el_custom_timeline_date_custom_format'], $item['ma_el_custom_timeline_date_format'], null, null, $item['ma_el_custom_timeline_date']);
				echo wp_kses_post($date);
			}
		?>
	</div><!-- meta -->
<?php
		}

		protected function jltma_horizontal_timeline()
		{
			$settings  = $this->get_settings_for_display();
			$unique_id = implode('-', [$this->get_id(), get_the_ID()]);

			if ($settings['ma_el_timeline_design_type'] === 'horizontal') {
				$this->add_render_attribute([
					'swiper_container' => [
						'class' => [
							'jltma-timeline-carousel-wrapper',
							'jltma-carousel',
							'jltma-swiper',
							'jltma-swiper__container',
							'jltma-timeline-slider',
							'swiper',
						],
						'data-jltma-template-widget-id' => $unique_id
					],

					'swiper_wrapper' => [
						'class' => [
							'jltma-timeline-carousel',
							'jltma-swiper__wrapper',
							'swiper-wrapper',
							'jltma-timeline-slider',
							'jltma-timeline-horizontal'
						],
					]

				]);

				//Global Header Function
				$this->jltma_render_swiper_header_attribute('timeline-carousel');

				$this->add_render_attribute('carousel', 'class', ['jltma-timeline-carousel-slider']);
			}
?>

	<?php if ($settings['ma_el_timeline_design_type'] === 'horizontal') { ?>
		<div <?php echo $this->get_render_attribute_string('carousel'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
		<?php } ?>
		<div <?php echo $this->get_render_attribute_string('swiper_container'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
			<div <?php echo $this->get_render_attribute_string('swiper_wrapper'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>

				<?php foreach ($settings['ma_el_custom_timeline_items'] as $index => $item) {

					$card_tag      = 'div';
					$slider_item   = $this->get_repeater_setting_key('slider-item', 'ma_el_custom_timeline_items', $index);
					$item_key      = $this->get_repeater_setting_key('item', 'ma_el_custom_timeline_items', $index);
					$card_key      = $this->get_repeater_setting_key('card', 'ma_el_custom_timeline_items', $index);
					$point_content = '';
					$wysiwyg_key   = $this->get_repeater_setting_key('content', 'ma_el_custom_timeline_items', $index);
					$meta_key      = $this->get_repeater_setting_key('date', 'ma_el_custom_timeline_items', $index);

					$content_id = $this->get_id() . '_' . esc_attr($item['_id']);

					$this->add_render_attribute([
						$item_key => [
							'class' => [
								'elementor-repeater-item-' . esc_attr($content_id),
								'jltma-blog-timeline-post'
							],
						],
						$slider_item => [
							'class' => [
								'jltma-slider__item',
								'jltma-swiper__slide',
								'swiper-slide',
							],
						],
						$card_key => [
							'class' => 'timeline-item__card',
						],
						$wysiwyg_key => [
							'class' => 'jltma-timeline-entry-content',
						],
						$meta_key => [
							'class' => [
								'timeline-item__meta',
								'meta',
							],
						],
					]);

					if (!empty($item['ma_el_custom_timeline_link']['url'])) {
						$card_tag = 'a';

						$this->add_render_attribute($card_key, 'href', $item['ma_el_custom_timeline_link']['url']);

						if ($item['ma_el_custom_timeline_link']['is_external']) {
							$this->add_render_attribute($card_key, 'target', '_blank');
						}

						if ($item['ma_el_custom_timeline_link']['nofollow']) {
							$this->add_render_attribute($card_key, 'rel', 'nofollow');
						}
					}

					if (isset($item['ma_el_custom_timeline_custom_style']) && $item['ma_el_custom_timeline_custom_style'] === 'yes' && isset($item['ma_el_timeline_points_content']) && $item['ma_el_timeline_points_content'] !== '') {
						$point_content_type = $item['ma_el_timeline_points_content'];
					} else {
						$point_content_type = $settings['ma_el_timeline_points_content'];
					}

					switch ($point_content_type) {
						case 'numbers':
							$point_content = $this->jltma_timeline_points_text($point_content_type, $index, $item);
							break;

						case 'letters':
							$point_content = $this->jltma_timeline_points_text($point_content_type, $index, $item);
							break;

						case 'image':
							$point_content = $this->jltma_timeline_points_image($item);
							break;

						case 'icons':
							$point_content = $this->jltma_timeline_points_icon($item);
							break;

						default:
							$point_content = '<div class="jltma-timeline-post-type-icon jltma-timeline__item__icon"><span class="jltma-timeline-circle"></span></div>';
					}

					//                                        if($settings['ma_el_timeline_selected_global_icon']['value']){
					//	                                            $point_content = $this->jltma_timeline_points_global_points();
					//                                        } else{
					//            				                    $point_content = '<span class="hexagon"></span>';
					//                                        }

				?>

					<div <?php echo $this->get_render_attribute_string($slider_item); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
						<<?php echo esc_attr($card_tag); ?> <?php echo $this->get_render_attribute_string($item_key); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>

							<div class="jltma-timeline-post-top">

								<div class="jltma-timeline-post-date">
									<?php
									if ($item['ma_el_custom_timeline_date_type'] == 'custom') {
										echo '<time datetime="' . esc_attr( get_the_modified_date('c') ) . '">';
										echo wp_kses_post( $this->parse_text_editor($item['ma_el_custom_timeline_label']) );
										echo '</time>';
									} else {
										$date = $this->get_date_formatted(true, $item['ma_el_custom_timeline_date_custom_format'], $item['ma_el_custom_timeline_date_format'], null, null, $item['ma_el_custom_timeline_date']);
										echo wp_kses_post($date);
									}
									?>
								</div><!-- /.jltma-timeline-post-date -->

							</div><!-- /.jltma-timeline-post-top -->

							<div class="jltma-timeline-horz-pointer">
								<?php echo wp_kses_post( $this->parse_text_editor($point_content) ); ?>
							</div>

							<div class="jltma-timeline-post-inner">

								<article class="post post-type">

									<?php if ($item['ma_el_custom_timeline_image']['url']) { ?>
										<div <?php echo $this->get_render_attribute_string('image'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
											<?php echo Group_Control_Image_Size::get_attachment_image_html($item, 'ma_el_custom_timeline_image'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_attachment_image_html returns safe Elementor HTML ?>
										</div>
									<?php } ?>

									<div class="jltma-timeline-entry-content">

										<div <?php echo $this->get_render_attribute_string($wysiwyg_key); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
											<?php echo wp_kses_post( $this->parse_text_editor($item['ma_el_custom_timeline_content']) ); ?>
										</div>

									</div><!-- /.jltma-timeline-entry-content -->
								</article><!-- /.post -->
							</div><!-- /.jltma-timeline-post-inner -->
						</<?php echo esc_attr($card_tag); ?>><!-- /.jltma-timeline-tag -->
					</div>
				<?php } ?>

			</div><!-- /.jltma-timeline-slider-inner -->
		</div>
		<!-- swiper_container -->

		<?php if ($settings['ma_el_timeline_design_type'] === 'horizontal') { ?>

			<?php $this->render_swiper_navigation(); ?>

			<?php if ('yes' === $settings['show_scrollbar']) { ?>
				<div class="swiper-scrollbar"></div>
			<?php } ?>

		</div>
	<?php } ?>

<?php }

		protected function jltma_timeline_points_text($type, $index = false, $item = false)
		{

			$settings  = $this->get_settings_for_display();
			$letters   = range('A', 'Z');
			$point_key = ($item) ? $this->get_repeater_setting_key('icon', 'items', $index) : 'point-text';
			$text      = 0;

			$text = ($type === 'numbers') ? $index + 1 : $letters[$index];

			if ($item) {
				if ($item['ma_el_custom_timeline_custom_style'] === 'yes' && '' !== $item['ma_el_custom_timeline_point_content']) {
					$text = $item['ma_el_custom_timeline_point_content'];
				}
			}

			$this->add_render_attribute($point_key, 'class', [
				'jltma-timeline-post-type-icon',
				'timeline-item__point__text'
			]);

			$output = '<div ' . $this->get_render_attribute_string($point_key) . '>' . esc_html($text) . '</div>';

			return $output;
		}

		protected function jltma_timeline_points_image($item = false)
		{
			$settings = $this->get_settings_for_display();

			$output = '';
			$output .= '<div class="jltma-timeline-post-mini-thumb">';

			if (isset($item['ma_el_custom_timeline_pointer_image']) && $item['ma_el_custom_timeline_pointer_image'] != "") {
				$output .= Group_Control_Image_Size::get_attachment_image_html($item, 'ma_el_custom_timeline_pointer_image');
			} elseif ($settings['ma_el_timeline_points_image'] != "") {
				$output .= Group_Control_Image_Size::get_attachment_image_html($settings, 'ma_el_timeline_points_image');
			}

			$output .= '</div>';

			return $output;
		}

		protected function jltma_timeline_points_global_points()
		{
			$settings = $this->get_settings_for_display();

			$global_point_content_type = $settings['ma_el_timeline_points_content'];

			switch ($global_point_content_type) {

				case 'numbers':
					$point_content = $this->jltma_timeline_points_text($global_point_content_type, true, false);
					break;

				case 'letters':
					$point_content = $this->jltma_timeline_points_text($global_point_content_type, true, false);
					break;

				case 'image':
					$point_content = $this->jltma_timeline_points_image($item = false);
					break;

				case 'icons':
					$point_content = $this->jltma_timeline_points_icon($item = false);
					break;

				default:
					$point_content = '<div class="jltma-timeline-post-type-icon jltma-timeline__item__icon"><span class="jltma-timeline-circle"></span></div>';
			}

			return $point_content;
		}

		protected function jltma_timeline_points_icon($item = false)
		{
			$settings = $this->get_settings_for_display();

			$global_icon_migrated = isset($settings['__fa4_migrated']['ma_el_timeline_selected_global_icon']);
			$global_icon_is_new   = empty($settings['global_icon']) && Icons_Manager::is_migration_allowed();
			$global_icon_value    = isset($settings['ma_el_timeline_selected_global_icon']['value']) ? $settings['ma_el_timeline_selected_global_icon']['value'] : '';
			$has_global_icon      = !empty($settings['global_icon']) || !empty($global_icon_value);

			if ($item) {
				$has_item_icon      = !empty($item['selected_point_icon']) || !empty($item['ma_el_custom_timeline_selected_icon']['value']);
				$item_icon_migrated = isset($item['__fa4_migrated']['ma_el_custom_timeline_selected_icon']);
				$item_icon_is_new   = empty($item['selected_point_icon']) && Icons_Manager::is_migration_allowed();
			}

			$output = '<div ' . $this->get_render_attribute_string('icon-wrapper') . '>';

			$icon_markup = '<i class="%s "></i>';
			$icon_rendered = '';

			if ($item && $has_item_icon) {
				if ($item_icon_is_new || $item_icon_migrated) {
					$icon_rendered = trim($this->get_library_point_icon($item['ma_el_custom_timeline_selected_icon']));
				} else if (!empty($item['selected_point_icon'])) {
					$icon_rendered = sprintf($icon_markup, $item['selected_point_icon']);
				}
			}

			// If no item icon rendered, try global icon
			if (empty(trim($icon_rendered)) && $has_global_icon) {
				if ($global_icon_is_new || $global_icon_migrated) {
					$icon_rendered = trim($this->get_library_point_icon($settings['ma_el_timeline_selected_global_icon']));
				} else if (!empty($settings['global_icon'])) {
					$icon_rendered = sprintf($icon_markup, $settings['global_icon']);
				}
			}

			// Fallback: render default circle if nothing rendered
			if (empty(trim($icon_rendered))) {
				$icon_rendered = '<span class="jltma-timeline-circle"></span>';
			}

			$output .= $icon_rendered;
			$output .= '</div>';

			return $output;
		}

		protected function get_library_point_icon($setting)
		{
			ob_start();
			Icons_Manager::render_icon($setting);
			return ob_get_clean();
		}

		protected function jltma_post_query_timeline()
		{
			// Static counter to track post index for numbers/letters (0-based)
			static $post_index = -1;
			$post_index++;

			$settings       = $this->get_settings_for_display();

			// Whitelist allowed HTML tags to prevent XSS
			$allowed_tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span', 'p'];
			$title_html_tag = in_array($settings['title_html_tag'], $allowed_tags, true)
				? $settings['title_html_tag']
				: 'h3';

			$card_tag       = 'div';
			$point_content  = '';

			// Point content - check if Pro controls exist
			if (isset($settings['ma_el_timeline_points_content']) && $settings['ma_el_timeline_points_content'] !== '') {

				$point_content_type = $settings['ma_el_timeline_points_content'];

				switch ($point_content_type) {
					case 'numbers':
						$point_content = $this->jltma_timeline_points_text($point_content_type, $post_index, false);
						break;

					case 'letters':
						$point_content = $this->jltma_timeline_points_text($point_content_type, $post_index, false);
						break;

					case 'image':
						$point_content = $this->jltma_timeline_points_image(false);
						break;

					case 'icons':
						$point_content = $this->jltma_timeline_points_icon(false);
						break;

					default:
						$point_content = '<div class="jltma-timeline-post-type-icon jltma-timeline__item__icon"><span class="jltma-timeline-circle"></span></div>';
				}
			} else {
				// Free version: show default circle point
				$point_content = '<div class="jltma-timeline-post-type-icon jltma-timeline__item__icon"><span class="jltma-timeline-circle"></span></div>';
			}
?>

	<div <?php echo $this->get_render_attribute_string('ma_el_timeline_posts'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
		<div <?php echo $this->get_render_attribute_string('point'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>><?php echo wp_kses_post( $this->parse_text_editor($point_content) ); ?></div>
		<div <?php echo $this->get_render_attribute_string('card-wrapper'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
			<div class="jltma-timeline-post-inner">
				<?php
				if ('yes' === $settings['ma_el_timeline_post_card_links']) {
					$card_tag = 'a ';
				}
				?>
				<<?php echo esc_attr($card_tag);

					if ('yes' === $settings['ma_el_timeline_post_card_links']) {
						echo 'class="timeline-item__card ' . esc_attr( implode(' ', get_post_class()) ) . '" ';
						echo 'href="' . esc_url( get_permalink(get_the_ID()) ) . '"';
					}
					?>>
					<div class="timeline-item__content-wrapper">

						<?php if (has_post_thumbnail() && (isset($settings['ma_el_timeline_post_thumbnail']) && !empty($settings['ma_el_timeline_post_thumbnail']))) { ?>
							<div <?php echo $this->get_render_attribute_string('image'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
								<?php echo $this->render_posts_thumbnail(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- render_posts_thumbnail returns safe image HTML ?>
							</div>
						<?php } ?>

						<div class="timeline-item__meta meta">
							<?php $this->render_date(true, get_the_ID()); ?>
						</div><!-- meta -->

						<div class="jltma-timeline-entry-content">
							<?php if ($settings['ma_el_timeline_post_title'] == "yes") { ?>
								<<?php echo esc_html($title_html_tag); ?> class="jltma-timeline-entry-title">
									<?php if ($settings['ma_el_timeline_post_title_link'] == "yes") { ?><a href="<?php the_permalink(); ?>"><?php } ?>
										<?php the_title(); ?>
										<?php if ($settings['ma_el_timeline_post_title_link'] == "yes") { ?></a><?php } ?>
								</<?php echo esc_html($title_html_tag); ?>>
							<?php } ?>
							<?php $this->jltma_el_timeline_content(); ?>
						</div>

						<?php $this->render_card_arrow(); ?>

					</div><!-- /.post -->
				</<?php echo esc_attr($card_tag); ?>>
			</div><!-- /.jltma-timeline-post-inner -->
		</div> <!-- card-wrapper -->
		<div <?php echo $this->get_render_attribute_string('meta-wrapper'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>
			<?php $this->render_date(true, get_the_ID()); ?>
		</div>
	</div>
<?php
		}

		protected function render_posts_thumbnail()
		{
			global $post;

			$settings = $this->get_settings_for_display();

			if (!has_post_thumbnail() || '' === $settings['ma_el_timeline_post_thumbnail'])
				return;

			$settings['ma_el_timeline_post_thumbnail_size'] = [
				'id' => get_post_thumbnail_id(),
			];

?>
	<div <?php echo $this->get_render_attribute_string('image'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_render_attribute_string returns safe Elementor HTML ?>>

		<?php if ('' === $settings['ma_el_timeline_post_card_links']) { ?>
			<a href="<?php the_permalink(); ?>">

			<?php }

			echo Group_Control_Image_Size::get_attachment_image_html($settings, 'ma_el_timeline_post_thumbnail_size'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_attachment_image_html returns safe Elementor HTML

			if ('' === $settings['ma_el_timeline_post_card_links']) { ?>

			</a>

		<?php } ?>

	</div>
<?php
		}

		protected function jltma_el_timeline_content()
		{

			$settings = $this->get_settings();

			$excerpt_type = $settings['ma_el_timeline_excerpt_type'];
			$excerpt_text = $settings['ma_el_timeline_excerpt_text'];
			//			$excerpt_src  = $settings['ma_el_post_grid_excerpt_content'];
			$excerpt_length = $settings['ma_el_timeline_excerpt_length'] ? $settings['ma_el_timeline_excerpt_length'] : 25;
			echo '<div class="timeline-item__excerpt">';
			echo wp_kses_post( Helper::jltma_el_get_excerpt_by_id(get_the_ID(), (int) $excerpt_length, esc_attr($excerpt_type), $this->parse_text_editor($excerpt_text), true, '', '', '') );
			echo '</div>';
		}

		public function get_date_formatted($custom, $custom_format, $date_format, $time_format, $post_id = null, $date_picker_val = null)
		{
			if ($custom) {
				$format = ($date_format != 'custom') ? $date_format : $custom_format;
				$value = wp_date($format, strtotime($date_picker_val));
			} else {
				$date_format = $date_format;
				$time_format = $time_format;
				$format      = '';

				if ('default' === $date_format) {
					$date_format = get_option('date_format');
				}

				if ('default' === $time_format) {
					$time_format = get_option('time_format');
				}

				if ($date_format) {
					$format   = $date_format;
					$has_date = true;
				} else {
					$has_date = false;
				}

				if ($time_format) {
					if ($has_date) {
						$format .= ' ';
					}
					$format .= $time_format;
				}
				$value = get_the_date($format, $post_id);
			}

			return wp_kses_post($value);
		}

		protected function get_settings_for_loop_display($post_id = false)
		{
			$loop_post_id = [];
			if ($post_id) {
				if (array_key_exists($post_id, $loop_post_id)) {
					return $loop_post_id[$post_id];
				}
			}
			return $loop_post_id;
		}

		protected function render_date($echo = true, $post_id = null)
		{

			$settings      = $this->get_settings_for_display();
			$loop_settings = $this->get_settings_for_loop_display($post_id);

			$custom = ('custom' === $settings['ma_el_timeline_date_format']) ? true : false;
			$date   = $this->get_date_formatted($custom, esc_attr($settings['ma_el_timeline_date_custom_format']), esc_attr($settings['ma_el_timeline_date_format']), esc_attr($settings['ma_el_timeline_time_format']), $post_id);

			if (!$echo) {
				return wp_kses_post($date);
			}

			echo wp_kses_post($date);
		}
	}
