<?php
class AIOC_TimelineCarousel extends ET_Builder_Module {

	public $slug       = 'aioc_timeline_carousel';
	public $child_slug = 'aioc_timeline_carousel_item';
	public $vb_support = 'on';

	protected $module_credits = array(
		'module_uri' => 'https://diviextended.com/product/all-in-one-carousel-for-divi',
		'author'     => 'Elicus',
		'author_uri' => 'https://elicus.com',
	);

	public function init() {
		$this->name             = esc_html__( 'DE Timeline Carousel', 'all-in-one-carousel-for-divi' );
		$this->child_item_text  = esc_html__( 'Timeline', 'all-in-one-carousel-for-divi' );
		$this->main_css_element = '%%order_class%%';
	}

	public function get_settings_modal_toggles() {
		return array(
			'general'  => array(
				'toggles' => array(
					'elements' => array(
						'title' => esc_html__( 'Elements', 'all-in-one-carousel-for-divi' ),
					),
					'slider_settings' => array(
						'title' => esc_html__( 'Slider', 'all-in-one-carousel-for-divi' ),
						'sub_toggles' => array(
							'general' => array(
								'name' => 'General',
							),
							'navigation' => array(
								'name' => 'Navigation',
							),
							'content' => array(
								'name' => 'Content',
							),
						),
						'tabbed_subtoggles' => true,
					),
				),
			),
			'advanced' => array(
				'toggles' => array(
					'text_settings' => array(
						'title' => esc_html__( 'Content', 'all-in-one-carousel-for-divi' ),
						'sub_toggles'   => array(
							'title' => array(
								'name' => 'Title',
							),
							'subtitle' => array(
								'name' => 'Subtitle',
							),
							'content' => array(
								'name' => 'Content',
							),
						),
						'tabbed_subtoggles' => true,
					),
					'image' => array(
						'title' => esc_html__( 'Image', 'all-in-one-carousel-for-divi' ),
					),
					'label_styling' => array(
						'title' => esc_html__( 'Label', 'all-in-one-carousel-for-divi' ),
					),
					'tooltip_arrow_setting' => array(
						'title' => esc_html__( 'Tooltip Arrow', 'all-in-one-carousel-for-divi' ),
					),
					'switch_setting' => array(
						'title' => esc_html__( 'Switch', 'all-in-one-carousel-for-divi' ),
					),
					'progressbar_setting' => array(
						'title' => esc_html__( 'ProgressBar', 'all-in-one-carousel-for-divi' ),
					),
					'arrow_settings' => array(
						'title' => esc_html__( 'Arrow', 'all-in-one-carousel-for-divi' ),
						'sub_toggles'   => array(
							'general' => array(
								'name' => 'General',
							),
							'left_arrow' => array(
								'name' => 'Left',
							),
							'right_arrow' => array(
								'name' => 'Right',
							),
						),
						'tabbed_subtoggles' => true,
					),
					'pagination_styles' => array(
						'title' => esc_html__( 'Pagination', 'all-in-one-carousel-for-divi' ),
					),
				),
			),
		);
	}

	public function get_advanced_fields_config() {
		return array(
			'fonts' => array(
				'title' => array(
					'label'     => esc_html__( 'Title', 'all-in-one-carousel-for-divi' ),
					'font_size' => array(
						'default_on_front' => '16px',
						'range_settings'   => array(
							'min'  => '1',
							'max'  => '100',
							'step' => '1',
						),
						'validate_unit'    => true,
					),
					'line_height' => array(
						'default_on_front' => '1.2em',
						'range_settings'   => array(
							'min'  => '0.1',
							'max'  => '10',
							'step' => '0.1',
						),
					),
					'letter_spacing' => array(
						'default_on_front' => '0px',
						'range_settings'   => array(
							'min'  => '0',
							'max'  => '10',
							'step' => '1',
						),
						'validate_unit'    => true,
					),
					'css' => array(
						'main' => '%%order_class%% .aioc_slide_title',
						'important' => 'all',
					),
					'hide_text_align' => true,
					'tab_slug'        => 'advanced',
					'toggle_slug'     => 'text_settings',
					'sub_toggle'      => 'title',
				),
				'subtitle' => array(
					'label'     => esc_html__( 'Subtitle', 'all-in-one-carousel-for-divi' ),
					'font_size' => array(
						'default'        => '16px',
						'range_settings' => array(
							'min'  => '1',
							'max'  => '100',
							'step' => '1',
						),
						'validate_unit'   => true,
					),
					'line_height' => array(
						'default_on_front' => '1.2em',
						'range_settings'   => array(
							'min'  => '0.1',
							'max'  => '10',
							'step' => '0.1',
						),
					),
					'letter_spacing' => array(
						'default_on_front' => '0px',
						'range_settings'   => array(
							'min'  => '0',
							'max'  => '10',
							'step' => '1',
						),
						'validate_unit'    => true,
					),
					'css' => array(
						'main' => '%%order_class%% .aioc_slide_subtitle',
						'important' => 'all',
					),
					'hide_text_align' => true,
					'tab_slug'        => 'advanced',
					'toggle_slug'     => 'text_settings',
					'sub_toggle'      => 'subtitle',
				),
				'content' => array(
					'label'     => esc_html__( 'Content', 'all-in-one-carousel-for-divi' ),
					'font_size' => array(
						'default_on_front' => '14px',
						'range_settings'   => array(
							'min'  => '1',
							'max'  => '100',
							'step' => '1',
						),
						'validate_unit'    => true,
					),
					'line_height' => array(
						'default_on_front' => '1.5em',
						'range_settings'   => array(
							'min'  => '0.1',
							'max'  => '10',
							'step' => '0.1',
						),
					),
					'letter_spacing' => array(
						'default_on_front' => '0px',
						'range_settings'   => array(
							'min'  => '0',
							'max'  => '10',
							'step' => '1',
						),
						'validate_unit'    => true,
					),
					'css' => array(
						'main' => '%%order_class%% .aioc_slide_content',
						'important' => 'all',
					),
					'hide_text_align' => true,
					'tab_slug'        => 'advanced',
					'toggle_slug'     => 'text_settings',
					'sub_toggle'      => 'content',
				),
				'label' => array(
					'label'     => esc_html__( 'Label', 'all-in-one-carousel-for-divi' ),
					'font_size' => array(
						'default' => '16px',
						'range_settings' => array(
							'min'  => '1',
							'max'  => '100',
							'step' => '1',
						),
						'validate_unit'   => true,
					),
					'line_height' => array(
						'default_on_front' => '1.2em',
						'range_settings'   => array(
							'min'  => '0.1',
							'max'  => '10',
							'step' => '0.1',
						),
					),
					'letter_spacing' => array(
						'default_on_front' => '0px',
						'range_settings'   => array(
							'min'  => '0',
							'max'  => '10',
							'step' => '1',
						),
						'validate_unit'    => true,
					),
					'css' => array(
						'main' => "{$this->main_css_element} .aioc_slide_label",
					),
					'hide_text_align' => true,
					'tab_slug' => 'advanced',
					'toggle_slug' => 'label_styling',
				),
			),
			'slider_margin_padding' => array(
				'image' => array(
					'margin_padding' => array(
						'css' => array(
							'margin' 	=> '%%order_class%% .aioc_slide_image_wrapper',
							'padding'   => '%%order_class%% .aioc_slide_image_wrapper',
							'important' => 'all',
						),
					),
				),
				'slider_container' => array(
					'margin_padding' => array(
						'css' => array(
							'use_margin' => false,
							'padding'    => "{$this->main_css_element} .swiper-container",
							'important'  => 'all',
						),
					),
				),
				'arrows' => array(
					'margin_padding' => array(
						'css' => array(
							'use_margin' => false,
							'padding'    => "{$this->main_css_element} .aioc_swiper_navigation .swiper-button-next, {$this->main_css_element} .aioc_swiper_navigation .swiper-button-prev",
							'important'  => 'all',
						),
					),
				),
				'switch' => array(
					'margin_padding' => array(
						'css' => array(
							'margin'  => '%%order_class%% .aioc_slide_switch_wrapper',
							'padding' => false,
						),
					),
				),
				'label' => array(
					'margin_padding' => array(
						'css' => array(
							'margin' 	=> false,
							'padding'   => '%%order_class%% .aioc_slide_label_wrapper',
							'important' => 'all',
						),
					),
				),				
			),
			'margin_padding' => array(
				'css' => array(
					'main'      => $this->main_css_element,
					'important' => 'all',
				),
			),
			'max_width' => array(
				'default' => array(
					'css' => array(
						'main'             => '%%order_class%%',
						'module_alignment' => '%%order_class%%',
					),
				),
			),
			'height' => array(
				'default' => array(
					'css' => array(
						'main' => '%%order_class%%',
					),
				),
			),
			'borders' => array(
				'image' => array(
					'label_prefix' => esc_html__( 'Image', 'divi-woocommerce-extended' ),
					'css' => array(
						'main' => array(
							'border_radii'  => '%%order_class%% .aioc_slide_image',
							'border_styles' => '%%order_class%% .aioc_slide_image',
						),
					),
					'tab_slug'    => 'advanced',
					'toggle_slug' => 'image',
				),
				'label'   => array(
					'css' => array(
						'main' => array(
							'border_styles' => '%%order_class%% .aioc_slide_label_wrapper',
							'border_radii'  => '%%order_class%% .aioc_slide_label_wrapper',
						),
					),
					'tab_slug' => 'advanced',
					'toggle_slug' => 'label_styling',
				),
				'switch'   => array(
					'css' => array(
						'main' => array(
							'border_styles' => '%%order_class%% .aioc_slide_switch_wrapper',
							'border_radii'  => '%%order_class%% .aioc_slide_switch_wrapper',
						),
					),
					'tab_slug' => 'advanced',
					'toggle_slug' => 'switch_setting',
				),
				'default' => array(
					'css' => array(
						'main' => array(
							'border_radii'  => $this->main_css_element,
							'border_styles' => $this->main_css_element,
						),
					),
				),
			),
			'box_shadow' => array(
				'label'   => array(
					'css' => array(
						'main' => "%%order_class%% .aioc_slide_label_wrapper",
					),
					'tab_slug'    => 'advanced',
					'toggle_slug' => 'label_styling',
				 ),
				'default' => array(
					'css' => array(
						'main'      => $this->main_css_element,
						'important' => 'all',
					),
				),
			),
			'background' => array(
				'css' => array(
					'main' => $this->main_css_element,
				),
			),
			'text'        => false,
			'text_shadow'  => false,
			'filters'      => false,
			'link_options' => false,
		);
	}

	public function get_fields() {
		$et_accent_color = et_builder_accent_color();
		return array(
			'show_tooltip_arrow' => array(
				'label'            => esc_html__( 'Show Tooltip Arrow', 'all-in-one-carousel-for-divi' ),
				'type'             => 'yes_no_button',
				'option_category'  => 'configuration',
				'options'          => array(
					'on'  => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ),
					'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ),
				),
				'default'          => 'on',
				'tab_slug'         => 'general',
				'toggle_slug'      => 'elements',
				'sub_toggle'	  => 'general',
				'description'      => esc_html__( 'Here you can enable/disable tooltip arrow on each slides.', 'all-in-one-carousel-for-divi' ),
			),
			'select_layout' => array(
				'label'            => esc_html__( 'Select Layout', 'all-in-one-carousel-for-divi' ),
				'type'             => 'select',
				'option_category'  => 'layout',
				'options'          => array(
					'layout1' => esc_html__( 'Layout 1', 'all-in-one-carousel-for-divi' ),
					'layout2' => esc_html__( 'Layout 2', 'all-in-one-carousel-for-divi' ),
				),
				'default'          => 'layout1',
				'default_on_front' => 'layout1',
				'tab_slug'         => 'general', 
				'toggle_slug'      => 'slider_settings',
				'sub_toggle'	   => 'content',
				'description'      => esc_html__( 'Here you can select the slider layout.', 'all-in-one-carousel-for-divi' ),
			),
			'slide_effect' => array(
				'label'           => esc_html__( 'Carousel Effect', 'all-in-one-carousel-for-divi' ),
				'type'            => 'select',
				'option_category' => 'layout',
				'options'         => array(
					'slide' => esc_html__( 'Slide', 'all-in-one-carousel-for-divi' ),
					'cube'  => esc_html__( 'Cube', 'all-in-one-carousel-for-divi' ),
					'flip'  => esc_html__( 'Flip', 'all-in-one-carousel-for-divi' ),
				),
				'default'         => 'slide',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'slider_settings',
				'sub_toggle'	  => 'general',
				'description'     => esc_html__( 'Here you can choose the slide animation effect.', 'all-in-one-carousel-for-divi' ),
			),
			'cards_per_slide' => array(
				'label'           => esc_html__( 'Slides Per View', 'all-in-one-carousel-for-divi' ),
				'type'            => 'select',
				'option_category' => 'layout',
				'options'         => array(
					'1'  => esc_html__( '1', 'all-in-one-carousel-for-divi' ),
					'2'  => esc_html__( '2', 'all-in-one-carousel-for-divi' ),
					'3'  => esc_html__( '3', 'all-in-one-carousel-for-divi' ),
					'4'  => esc_html__( '4', 'all-in-one-carousel-for-divi' ),
					'5'  => esc_html__( '5', 'all-in-one-carousel-for-divi' ),
					'6'  => esc_html__( '6', 'all-in-one-carousel-for-divi' ),
					'7'  => esc_html__( '7', 'all-in-one-carousel-for-divi' ),
					'8'  => esc_html__( '8', 'all-in-one-carousel-for-divi' ),
					'9'  => esc_html__( '9', 'all-in-one-carousel-for-divi' ),
					'10' => esc_html__( '10', 'all-in-one-carousel-for-divi' ),
					'11' => esc_html__( '11', 'all-in-one-carousel-for-divi' ),
					'12' => esc_html__( '12', 'all-in-one-carousel-for-divi' ),
					'13' => esc_html__( '13', 'all-in-one-carousel-for-divi' ),
					'14' => esc_html__( '14', 'all-in-one-carousel-for-divi' ),
					'15' => esc_html__( '15', 'all-in-one-carousel-for-divi' ),
				),
				'default'         => '3',
				'mobile_options'  => true,
				'show_if'         => array(
					'slide_effect' => array( 'slide' ),
				),
				'tab_slug'        => 'general',
				'toggle_slug'     => 'slider_settings',
				'sub_toggle'	  => 'general',
				'description'     => esc_html__( 'Here you can choose the number of cards to display per slide.', 'all-in-one-carousel-for-divi' ),
			),
			'slides_per_group' => array(
				'label'           => esc_html__( 'Slides Per Group', 'all-in-one-carousel-for-divi' ),
				'type'            => 'select',
				'option_category' => 'layout',
				'options'         => array(
					'1'  => esc_html__( '1', 'all-in-one-carousel-for-divi' ),
					'2'  => esc_html__( '2', 'all-in-one-carousel-for-divi' ),
					'3'  => esc_html__( '3', 'all-in-one-carousel-for-divi' ),
					'4'  => esc_html__( '4', 'all-in-one-carousel-for-divi' ),
					'5'  => esc_html__( '5', 'all-in-one-carousel-for-divi' ),
					'6'  => esc_html__( '6', 'all-in-one-carousel-for-divi' ),
					'7'  => esc_html__( '7', 'all-in-one-carousel-for-divi' ),
					'8'  => esc_html__( '8', 'all-in-one-carousel-for-divi' ),
					'9'  => esc_html__( '9', 'all-in-one-carousel-for-divi' ),
					'10' => esc_html__( '10', 'all-in-one-carousel-for-divi' ),
					'11' => esc_html__( '11', 'all-in-one-carousel-for-divi' ),
					'12' => esc_html__( '12', 'all-in-one-carousel-for-divi' ),
					'13' => esc_html__( '13', 'all-in-one-carousel-for-divi' ),
					'14' => esc_html__( '14', 'all-in-one-carousel-for-divi' ),
					'15' => esc_html__( '15', 'all-in-one-carousel-for-divi' ),
				),
				'default'         => '1',
				'mobile_options'  => true,
				'show_if'         => array(
					'slide_effect' => array( 'slide' ),
				),
				'tab_slug'        => 'general',
				'toggle_slug'     => 'slider_settings',
				'sub_toggle'	  => 'general',
				'description'     => esc_html__( 'Here you can choose the number of slides per group to slide by.', 'all-in-one-carousel-for-divi' ),
			),
			'space_between_slides' => array(
				'label'           => esc_html__( 'Space between Slides', 'all-in-one-carousel-for-divi' ),
				'type'            => 'range',
				'option_category' => 'layout',
				'range_settings'  => array(
					'min'  => '10',
					'max'  => '100',
					'step' => '1',
				),
				'show_if'         => array(
					'slide_effect' => array( 'slide' ),
				),
				'fixed_unit'	  => 'px',
				'default'         => '20px',
				'mobile_options'  => true,
				'tab_slug'        => 'general',
				'toggle_slug'     => 'slider_settings',
				'sub_toggle'	  => 'general',
				'description'     => esc_html__( 'Move the slider or input the value to increse or decrease the space between slides.', 'all-in-one-carousel-for-divi' ),
			),
			'slider_loop' => array(
				'label'           => esc_html__( 'Enable Loop', 'all-in-one-carousel-for-divi' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'on'  => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ),
					'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ),
				),
				'default'         => 'on',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'slider_settings',
				'sub_toggle'	  => 'general',
				'description'     => esc_html__( 'Here you can enable loop for the slides.', 'all-in-one-carousel-for-divi' ),
			),
			'autoplay' => array(
				'label'           => esc_html__( 'Autoplay', 'all-in-one-carousel-for-divi' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'on'  => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ),
					'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ),
				),
				'default'          => 'on',
				'tab_slug'         => 'general',
				'toggle_slug'      => 'slider_settings',
				'sub_toggle'	  => 'general',
				'description'      => esc_html__( 'This controls the auto play of the card carousel.', 'all-in-one-carousel-for-divi' ),
			),
			'enable_linear_transition'	=> array(
				'label'           => esc_html__( 'Enable Linear Transition', 'all-in-one-carousel-for-divi' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'on'  => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ),
					'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ),
				),
				'default'         => 'off',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'slider_settings',
				'sub_toggle'	  => 'general',
				'description'     => esc_html__( 'Here you can choose whether or not to enable linear transition between slides.', 'all-in-one-carousel-for-divi' ),
			),
			'autoplay_speed' => array(
				'label'           => esc_html__( 'Autoplay Delay', 'all-in-one-carousel-for-divi' ),
				'type'            => 'text',
				'option_category' => 'configuration',
				'default'         => '3000',
				'show_if'         => array(
					'autoplay' => 'on',
				),
				'tab_slug'        => 'general',
				'toggle_slug'     => 'slider_settings',
				'sub_toggle'	  => 'general',
				'description'     => esc_html__( 'This controls the time of the slide before the transition.', 'all-in-one-carousel-for-divi' ),
			),
			'pause_on_hover' => array(
				'label'           => esc_html__( 'Pause On Hover', 'all-in-one-carousel-for-divi' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'on'  => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ),
					'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ),
				),
				'default'         => 'on',
				'show_if'         => array(
					'autoplay' => 'on',
				),
				'tab_slug'        => 'general',
				'toggle_slug'     => 'slider_settings',
				'sub_toggle'	  => 'general',
				'description'     => esc_html__( 'Control for pausing slides on mouse hover.', 'all-in-one-carousel-for-divi' ),
			),
			'transition_duration' => array(
				'label'           => esc_html__( 'Transition Duration', 'all-in-one-carousel-for-divi' ),
				'type'            => 'text',
				'option_category' => 'configuration',
				'default'         => '1000',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'slider_settings',
				'sub_toggle'	  => 'general',
				'description'     => esc_html__( 'Here you can specify the duration of transition for each slide in miliseconds.', 'all-in-one-carousel-for-divi' ),
			),
			'show_arrow' => array(
				'label'           => esc_html__( 'Show Arrows', 'all-in-one-carousel-for-divi' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'on'  => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ),
					'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ),
				),
				'default'          => 'off',
				'default_on_front' => 'off',
				'tab_slug'         => 'general',
				'toggle_slug'      => 'slider_settings',
				'sub_toggle'	   => 'navigation',
				'description'      => esc_html__( 'Choose whether or not the previous & next arrows should be visible.', 'all-in-one-carousel-for-divi' ),
			),
			'show_arrow_on_hover' => array(
				'label'            => esc_html__( 'Show Arrows On Hover', 'all-in-one-carousel-for-divi' ),
				'type'             => 'yes_no_button',
				'option_category'  => 'configuration',
				'options'          => array(
					'on'  => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ),
					'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ),
				),
				'show_if'          => array(
					'show_arrow' => 'on',
				),
				'default'          => 'off',
				'default_on_front' => 'off',
				'tab_slug'         => 'general',
				'toggle_slug'      => 'slider_settings',
				'sub_toggle'	   => 'navigation',
				'description'      => esc_html__( 'Choose whether or not the previous and next arrows should be visible.', 'all-in-one-carousel-for-divi' ),
			),
			'arrows_position' => array(
				'label'           => esc_html__( 'Arrows Position', 'all-in-one-carousel-for-divi' ),
				'type'            => 'select',
				'option_category' => 'layout',
				'options'         => array(
					'inside' 			   => esc_html__( 'Inside', 'all-in-one-carousel-for-divi' ),
					'outside'			   => esc_html__( 'Outside', 'all-in-one-carousel-for-divi' ),
					'top_left'      	   => esc_html__( 'Top Left', 'all-in-one-carousel-for-divi' ),
					'top_right'     	   => esc_html__( 'Top Right', 'all-in-one-carousel-for-divi' ),
					'top_center'    	   => esc_html__( 'Top Center', 'all-in-one-carousel-for-divi' ),
					'bottom_left'   	   => esc_html__( 'Bottom Left', 'all-in-one-carousel-for-divi' ),
					'inside_bottom_left'   => esc_html__( 'Inside Bottom Left', 'all-in-one-carousel-for-divi' ),
					'bottom_right'  	   => esc_html__( 'Bottom Right', 'all-in-one-carousel-for-divi' ),
					'inside_bottom_right'  => esc_html__( 'Inside Bottom Right', 'all-in-one-carousel-for-divi' ),
					'bottom_center' 	   => esc_html__( 'Bottom Center', 'all-in-one-carousel-for-divi' ),
					'inside_bottom_center' => esc_html__( 'Inside Bottom Center', 'all-in-one-carousel-for-divi' ),
				),
				'default'         => 'inside',
				'mobile_options'  => true,
				'show_if'         => array(
					'show_arrow' => 'on',
				),
				'tab_slug'        => 'general',
				'toggle_slug'     => 'slider_settings',
				'sub_toggle'	  => 'navigation',
				'description'     => esc_html__( 'Here you can choose the arrows position.', 'all-in-one-carousel-for-divi' ),
			),
			'show_control_dot' => array(
				'label'            => esc_html__( 'Show Dots Pagination', 'all-in-one-carousel-for-divi' ),
				'type'             => 'yes_no_button',
				'option_category'  => 'configuration',
				'options'          => array(
					'on'  => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ),
					'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ),
				),
				'default'          => 'off',
				'default_on_front' => 'off',
				'tab_slug'         => 'general',
				'toggle_slug'      => 'slider_settings',
				'sub_toggle'	   => 'navigation',
				'description'      => esc_html__( 'This setting will turn on and off the pagination of the slider.', 'all-in-one-carousel-for-divi' ),
			),
			'control_dot_style' => array(
				'label'            => esc_html__( 'Dots Pagination Style', 'all-in-one-carousel-for-divi' ),
				'type'             => 'select',
				'option_category'  => 'layout',
				'options'          => array(
					'solid_dot'       => esc_html__( 'Solid Dot', 'all-in-one-carousel-for-divi' ),
					'transparent_dot' => esc_html__( 'Transparent Dot', 'all-in-one-carousel-for-divi' ),
					'stretched_dot'   => esc_html__( 'Stretched Dot', 'all-in-one-carousel-for-divi' ),
					'line'            => esc_html__( 'Line', 'all-in-one-carousel-for-divi' ),
					'rounded_line'    => esc_html__( 'Rounded Line', 'all-in-one-carousel-for-divi' ),
					'square_dot'      => esc_html__( 'Squared Dot', 'all-in-one-carousel-for-divi' ),
					'number_dot'      => esc_html__( 'Number Dot', 'all-in-one-carousel-for-divi' ),
				),
				'show_if'          => array(
					'show_control_dot' => 'on',
				),
				'default'          => 'solid_dot',
				'tab_slug'         => 'general',
				'toggle_slug'      => 'slider_settings',
				'sub_toggle'	   => 'navigation',
				'description'      => esc_html__( 'control dot style', 'all-in-one-carousel-for-divi' ),
			),
			'enable_dynamic_dots' => array(
				'label'            => esc_html__( 'Enable Dynamic Dots', 'all-in-one-carousel-for-divi' ),
				'type'             => 'yes_no_button',
				'option_category'  => 'configuration',
				'options'          => array(
					'on'  => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ),
					'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ),
				),
				'default'          => 'off',
				'show_if'          => array(
					'show_control_dot' => 'on',
					'control_dot_style' => array(
						'solid_dot',
						'transparent_dot',
						'square_dot',
						'number_dot'
					),
				),
				'tab_slug'         => 'general',
				'toggle_slug'      => 'slider_settings',
				'sub_toggle'	   => 'navigation',
				'description'      => esc_html__( 'This setting will turn on and off the dynamic pagination of the slider.', 'all-in-one-carousel-for-divi' ),
			),
			'content_alignment' => array(
				'label'             => esc_html__( 'Content Alignment', 'all-in-one-carousel-for-divi' ),
				'type'              => 'select',
				'option_category'   => 'configuration',
				'options'           => array(
					'top_left'      => esc_html__( 'Top Left', 'all-in-one-carousel-for-divi' ),
					'top_right'     => esc_html__( 'Top Right', 'all-in-one-carousel-for-divi' ),
					'top_center'    => esc_html__( 'Top Center', 'all-in-one-carousel-for-divi' ),
					'center'        => esc_html__( 'Center', 'all-in-one-carousel-for-divi' ),
					'bottom_left'   => esc_html__( 'Bottom Left', 'all-in-one-carousel-for-divi' ),
					'bottom_right'  => esc_html__( 'Bottom Right', 'all-in-one-carousel-for-divi' ),
					'bottom_center' => esc_html__( 'Bottom Center', 'all-in-one-carousel-for-divi' ),
					'left_center' 	=> esc_html__( 'Left Top Center', 'all-in-one-carousel-for-divi' ),
					'right_center' 	=> esc_html__( 'Right Top Center', 'all-in-one-carousel-for-divi' ),
				),
				'default'           => 'center',
				'default_on_front'  => 'center',
				'tab_slug'          => 'general',
				'toggle_slug'       => 'slider_settings',
				'sub_toggle'	  => 'content',
				'description'       => esc_html__( 'Here you can select the content alignment.', 'all-in-one-carousel-for-divi' ),
			),
			'disable_lazyload' => array(
				'label'        	   => esc_html__( 'Disable Lazy Load', 'all-in-one-carousel-for-divi' ),
				'type'             => 'yes_no_button',
				'option_category'  => 'configuration',
				'options'          => array(
					'on'  => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ),
					'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ),
				),
				'default'          => 'off',
				'tab_slug'         => 'advanced',
				'toggle_slug'      => 'image',
				'description'      => esc_html__( 'Enable this to disable lazy loading.', 'all-in-one-carousel-for-divi' ),
			),
			'enable_fullwidth_label' => array(
				'label'            => esc_html__( 'Force Full Width', 'all-in-one-carousel-for-divi' ),
				'type'             => 'yes_no_button',
				'option_category'  => 'configuration',
				'options'          => array(
					'on'  => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ),
					'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ),
				),
				'default' 			=> 'off',
				'default_on_front' 	=> 'off',
				'tab_slug'          => 'advanced',
				'toggle_slug' 		=> 'label_styling',
				'description'      	=> esc_html__( 'Enable or disable label fullwidth.', 'all-in-one-carousel-for-divi' ),
			),
			'label_align'          => array(
				'label'            => esc_html__( 'Label Alignment', 'all-in-one-carousel-for-divi' ),
				'type'             => 'text_align',
				'option_category'  => 'layout',
				'options'          => et_builder_get_text_orientation_options( array( 'justified' ) ),
				'default_on_front' => 'center',
				'show_if'         => array(
					'enable_fullwidth_label' => 'on',
				),
				'tab_slug'        	=> 'advanced',
				'toggle_slug' 	   => 'label_styling',
				'description'      => esc_html__( 'Here you can choose the label alignment.', 'all-in-one-carousel-for-divi' ),
				'options_icon'     => 'module_align',
			),
			'label_icon_color' => array(
				'label'          	 => esc_html__( 'Label Icon Color', 'all-in-one-carousel-for-divi' ),
				'type'            	=> 'color-alpha',
				'hover'           	=> 'tabs',
				'mobile_options'  	=> true,
				'show_if'         => array(
					'label_type' => 'icon',
				),
				'tab_slug'        	=> 'advanced',
				'toggle_slug' 	   => 'label_styling',
				'description'     	=> esc_html__( 'Here you can define a custom color for your label icon.', 'all-in-one-carousel-for-divi' ),
			),
			'label_icon_font_size' => array(
				'label'            => esc_html__( 'Label Icon Font Size', 'all-in-one-carousel-for-divi' ),
				'type'             => 'range',
				'option_category'  => 'font_option',
				'range_settings'   => array(
					'min'  => '1',
					'max'  => '120',
					'step' => '1',
				),
				'show_if'         => array(
					'label_type' => 'icon',
				),
				'mobile_options'   => true,
				'tab_slug'         => 'advanced',
				'toggle_slug' 	   => 'label_styling',
				'description'      => esc_html__( 'Control the size of the icon by increasing or decreasing the font size.', 'all-in-one-carousel-for-divi' ),
			),
			'label_background_color' => array(
				'label'        => esc_html__( 'Label Background', 'all-in-one-carousel-for-divi' ),
				'type'         => 'color-alpha',
				'custom_color' => true,
				'hover'        		=> 'tabs',
				'tab_slug'        	=> 'advanced',
				'toggle_slug' 		=> 'label_styling',
				'description'  => esc_html__( 'Here you can choose a custom color to be used for background of label.', 'all-in-one-carousel-for-divi' ),
			),
			'label_custom_padding' => array(
				'label'                 => esc_html__( 'Label Padding', 'all-in-one-carousel-for-divi' ),
				'type'                  => 'custom_padding',
				'option_category'       => 'layout',
				'mobile_options'        => true,
				'hover'                 => false,
				'default'          		=> '5px|5px|5px|5px|true|true',
				'default_on_front' 		=> '5px|5px|5px|5px|true|true',
				'tab_slug'              => 'advanced',
				'toggle_slug' 		    => 'label_styling',
				'description'           => esc_html__( 'Padding adds extra space to the inside of the element, increasing the distance between the edge of the element and its inner contents.', 'all-in-one-carousel-for-divi' ),
			),
			'tooltip_arrow_color' => array(
				'label'        => esc_html__( 'Tooltip arrow', 'all-in-one-carousel-for-divi' ),
				'type'         => 'color-alpha',
				'custom_color' => true,
				'default'               => '',
				'default_on_front'      => '',
				'show_if'         => array(
					'show_tooltip_arrow' => 'on',
				),
				'tab_slug'        => 'advanced',
				'toggle_slug' 		=> 'tooltip_arrow_setting',
				'description'  => esc_html__( 'Here you can choose a custom color to be used for tooltip arrow.', 'all-in-one-carousel-for-divi' ),
			),
			'switch_background_color' => array(
				'label'            => esc_html__( 'Switch Background', 'all-in-one-carousel-for-divi' ),
				'type'             => 'color-alpha',
				'custom_color'     => true,
				'default'          => '#cccccc',
				'default_on_front' => '#cccccc',
				'hover'            => 'tabs',
				'tab_slug'         => 'advanced',
				'toggle_slug' 	   => 'switch_setting',
				'description'      => esc_html__( 'Here you can choose a custom color to be used for background of switch.', 'all-in-one-carousel-for-divi' ),
			),
			'icon_color' => array(
				'label'             => esc_html__( 'Icon Color', 'all-in-one-carousel-for-divi' ),
				'type'            	=> 'color-alpha',
				'hover'           	=> 'tabs',
				'mobile_options'  	=> true,
				'default'           => esc_attr( $et_accent_color ),
				'default_on_front'  => esc_attr( $et_accent_color ),
				'tab_slug'        	=> 'advanced',
				'toggle_slug'     	=> 'switch_setting',
				'description'     	=> esc_html__( 'Here you can define a custom color for your icon.', 'all-in-one-carousel-for-divi' ),
			),
			'icon_font_size' => array(
				'label'            => esc_html__( 'Icon Font Size', 'all-in-one-carousel-for-divi' ),
				'type'             => 'range',
				'option_category'  => 'font_option',
				'range_settings'   => array(
					'min'  => '1',
					'max'  => '120',
					'step' => '1',
				),
				'default'          => '32px',
				'mobile_options'   => true,
				'tab_slug'         => 'advanced',
				'toggle_slug'      => 'switch_setting',
				'description'      => esc_html__( 'Control the size of the icon by increasing or decreasing the font size.', 'all-in-one-carousel-for-divi' ),
			),
			'switch_width' => array(
				'label'            => esc_html__( 'Switch Width', 'all-in-one-carousel-for-divi' ),
				'type'             => 'range',
				'option_category'  => 'font_option',
				'range_settings'   => array(
					'min'  => '1',
					'max'  => '100',
					'step' => '1',
				),
				'default'          => '40%',
				'default_on_front' => '40%',
				'mobile_options'   => true,
				'tab_slug'         => 'advanced',
				'toggle_slug'      => 'switch_setting',
				'description'      => esc_html__( 'Custom switch width.', 'all-in-one-carousel-for-divi' ),
			),
			'switch_height' => array(
				'label'            => esc_html__( 'Switch Height', 'all-in-one-carousel-for-divi' ),
				'type'             => 'range',
				'option_category'  => 'font_option',
				'range_settings'   => array(
					'min'  => '1',
					'max'  => '1000',
					'step' => '1',
				),
				'fixed_unit'	   => 'px',
				'default'          => '60px',
				'default_on_front' => '60px',
				'mobile_options'   => true,
				'tab_slug'         => 'advanced',
				'toggle_slug'      => 'switch_setting',
				'description'      => esc_html__( 'Custom switch height.', 'all-in-one-carousel-for-divi' ),
			),
			'switch_custom_margin' => array(
				'label'            => esc_html__( 'Switch Margin', 'all-in-one-carousel-for-divi' ),
				'type'             => 'custom_padding',
				'option_category'  => 'layout',
				'mobile_options'   => true,
				'hover'            => false,
				'default'          => '25px||25px||true|true',
				'default_on_front' => '25px||25px||true|true',
				'tab_slug'         => 'advanced',
				'toggle_slug' 	   => 'switch_setting',
				'description'      => esc_html__( 'Margin adds extra space to the outside of the element, increasing the distance between the edge of the element and its inner contents.', 'all-in-one-carousel-for-divi' ),
			),
			'inacitve_progressbar_color' => array(
				'label'            => esc_html__( 'Inactive ProgressBar Color', 'all-in-one-carousel-for-divi' ),
				'type'             => 'color-alpha',
				'custom_color'     => true,
				'default'          => '#cccccc',
				'default_on_front' => '#cccccc',
				'hover'            => 'tabs',
				'tab_slug'         => 'advanced',
				'toggle_slug' 	   => 'progressbar_setting',
				'description'      => esc_html__( 'Here you can choose a custom color to be used for inactive progressbar.', 'all-in-one-carousel-for-divi' ),
			),
			'acitve_progressbar_color' => array(
				'label'            => esc_html__( 'Active ProgressBar Color', 'all-in-one-carousel-for-divi' ),
				'type'             => 'color-alpha',
				'custom_color'     => true,
				'default'          => esc_attr( $et_accent_color ),
				'default_on_front' => esc_attr( $et_accent_color ),
				'hover'            => 'tabs',
				'tab_slug'         => 'advanced',
				'toggle_slug' 	   => 'progressbar_setting',
				'description'      => esc_html__( 'Here you can choose a custom color to be used for active progressbar.', 'all-in-one-carousel-for-divi' ),
			),
			'progressbar_height' => array(
				'label'           => esc_html__( 'ProgressBar Height', 'all-in-one-carousel-for-divi' ),
				'type'            => 'range',
				'option_category' => 'font_option',
				'range_settings'  => array(
					'min'  => '1',
					'max'  => '100',
					'step' => '1',
				),
				'mobile_options'   => true,
				'fixed_unit'	   => 'px',
				'default'          => '3px',
				'default_on_front' => '3px',
				'tab_slug'         => 'advanced',
				'toggle_slug'      => 'progressbar_setting',
				'description'      => esc_html__( 'Control the height of the progressbar by increasing or decreasing the size.', 'all-in-one-carousel-for-divi' ),
			),
			'arrows_custom_padding' => array(
				'label'            => esc_html__( 'Arrows Padding', 'all-in-one-carousel-for-divi' ),
				'type'             => 'custom_padding',
				'option_category'  => 'layout',
				'show_if'          => array(
					'show_arrow' => 'on',
				),
				'default'		   => '5px|10px|5px|10px|true|true',
				'default_on_front' => '5px|10px|5px|10px|true|true',
				'mobile_options'   => true,
				'hover'            => false,
				'tab_slug'         => 'advanced',
				'toggle_slug'      => 'arrow_settings',
				'sub_toggle'	   => 'general',
				'description'      => esc_html__( 'Padding adds extra space to the inside of the element, increasing the distance between the edge of the element and its inner contents.', 'all-in-one-carousel-for-divi' ),
			),
			'space_between_arrows' => array(
				'label'           => esc_html__( 'Space between Arrows', 'all-in-one-carousel-for-divi' ),
				'type'            => 'range',
				'option_category' => 'layout',
				'range_settings'  => array(
					'min'  => '0',
					'max'  => '100',
					'step' => '1',
				),
				'show_if_not'     => array(
					'arrows_position' => array('inside', 'outside'),
				),
				'fixed_unit'	  => 'px',
				'default'         => '15px',
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'arrow_settings',
				'sub_toggle'	  => 'general',
				'description'     => esc_html__( 'Move the slider or input the value to increse or decrease the space between arrows.', 'all-in-one-carousel-for-divi' ),
			),
			'arrow_font_size' => array(
				'label'           => esc_html__( 'Arrow Font Size', 'all-in-one-carousel-for-divi' ),
				'type'            => 'range',
				'option_category' => 'layout',
				'range_settings'  => array(
					'min'  => '10',
					'max'  => '100',
					'step' => '1',
				),
				'show_if'         => array(
					'show_arrow' => 'on',
				),
				'mobile_options'  => true,
				'default'         => '24px',
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'arrow_settings',
				'sub_toggle'	  => 'general',
				'description'     => esc_html__( 'Here you can choose the arrow font size.', 'all-in-one-carousel-for-divi' ),
			),
			'arrow_color' => array(
				'label'        => esc_html__( 'Arrow Color', 'all-in-one-carousel-for-divi' ),
				'type'         => 'color-alpha',
				'custom_color' => true,
				'show_if'      => array(
					'show_arrow' => 'on',
				),
				'tab_slug'     => 'advanced',
				'toggle_slug'  => 'arrow_settings',
				'sub_toggle'   => 'general',
				'description'  => esc_html__( 'Here you can define color for the arrow', 'all-in-one-carousel-for-divi' ),
			),
			'arrow_background_color' => array(
				'label'        => esc_html__( 'Arrow Background', 'all-in-one-carousel-for-divi' ),
				'type'         => 'color-alpha',
				'custom_color' => true,
				'show_if'      => array(
					'show_arrow' => 'on',
				),
				'hover'        => 'tabs',
				'tab_slug'     => 'advanced',
				'toggle_slug'  => 'arrow_settings',
				'sub_toggle'   => 'general',
				'description'  => esc_html__( 'Here you can choose a custom color to be used for the shape background of arrows.', 'all-in-one-carousel-for-divi' ),
			),
			'arrow_background_border_size' => array(
				'label'           => esc_html__( 'Arrow Background Border', 'all-in-one-carousel-for-divi' ),
				'type'            => 'range',
				'option_category' => 'layout',
				'range_settings'  => array(
					'min'  => '1',
					'max'  => '10',
					'step' => '1',
				),
				'show_if' 		  => array(
					'show_arrow' => 'on',
				),
				'default'         => '0px',
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'arrow_settings',
				'sub_toggle'	  => 'general',
				'description'     => esc_html__( 'Move the slider or input the value to increase or decrease the border size of the arrow background.', 'all-in-one-carousel-for-divi' ),
			),
			'arrow_background_border_color' => array(
				'label'        => esc_html__( 'Arrow Background Border Color', 'all-in-one-carousel-for-divi' ),
				'type'         => 'color-alpha',
				'custom_color' => true,
				'show_if'      => array(
					'show_arrow' => 'on',
				),
				'hover'        => 'tabs',
				'tab_slug'     => 'advanced',
				'toggle_slug'  => 'arrow_settings',
				'sub_toggle'   => 'general',
				'description'  => esc_html__( 'Here you can choose a custom color to be used for the arrow border', 'all-in-one-carousel-for-divi' ),
			),
			'arrows_border_radius' => array(
				'label'       => esc_html__( 'Border Radius', 'all-in-one-carousel-for-divi' ),
				'type'        => 'border-radius',
				'default'     => 'on||||',
				'show_if'     => array(
					'show_arrow' => 'on',
				),
				'tab_slug'     => 'advanced',
				'toggle_slug'  => 'arrow_settings',
				'sub_toggle'   => 'general',
			),
			'previous_slide_arrow' => array(
				'label'           => esc_html__( 'Previous Arrow', 'all-in-one-carousel-for-divi' ),
				'type'            => 'select_icon',
				'option_category' => 'basic_option',
				'class'           => array(
					'et-pb-font-icon',
				),
				'show_if'         => array(
					'show_arrow' => 'on',
				),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'arrow_settings',
				'sub_toggle'	  => 'left_arrow',
				'description'     => esc_html__( 'Here you can select the icon to be used for the previous slide navigation.', 'all-in-one-carousel-for-divi' ),
			),
			'next_slide_arrow' => array(
				'label'           => esc_html__( 'Next Arrow', 'all-in-one-carousel-for-divi' ),
				'type'            => 'select_icon',
				'option_category' => 'basic_option',
				'class'           => array(
					'et-pb-font-icon',
				),
				'show_if'         => array(
					'show_arrow' => 'on',
				),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'arrow_settings',
				'sub_toggle'	  => 'right_arrow',
				'description'     => esc_html__( 'Here you can select the icon to be used for the next slide navigation.', 'all-in-one-carousel-for-divi' ),
			),
			'control_dot_active_color' => array(
				'label'        => esc_html__( 'Active Dot Pagination Color', 'all-in-one-carousel-for-divi' ),
				'type'         => 'color-alpha',
				'custom_color' => true,
				'show_if'      => array(
					'show_control_dot' => 'on',
				),
				'default'      	=> '#000000',
				'tab_slug'      => 'advanced',
				'toggle_slug'   => 'pagination_styles',
				'description'   => esc_html__( 'Here you can define color for the active pagination item.', 'all-in-one-carousel-for-divi' ),
			),
			'control_dot_inactive_color' => array(
				'label'        => esc_html__( 'Inactive Dot Pagination Color', 'all-in-one-carousel-for-divi' ),
				'type'         => 'color-alpha',
				'custom_color' => true,
				'show_if'      => array(
					'show_control_dot' => 'on',
				),
				'default'      => '#bbbbbb',
				'tab_slug'     => 'advanced',
				'toggle_slug'  => 'pagination_styles',
				'description'  => esc_html__( 'Here you can define color for the inactive pagination item.', 'all-in-one-carousel-for-divi' ),
			),
			'number_dot_text_color' => array(
				'label'        => esc_html__( 'Number Dot Color', 'all-in-one-carousel-for-divi' ),
				'type'         => 'color-alpha',
				'custom_color' => true,
				'show_if'      => array(
					'show_control_dot'  => 'on',
					'control_dot_style' => 'number_dot',
				),
				'default'      => '#ffffff',
				'tab_slug'     => 'advanced',
				'toggle_slug'  => 'pagination_styles',
				'description'  => esc_html__( 'Here you can define color for the number of pagination item.', 'all-in-one-carousel-for-divi' ),
			),
			'enable_custom_image_width' => array(
				'label'           => esc_html__( 'Enable Custom Image Width', 'all-in-one-carousel-for-divi' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'on'  => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ),
					'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ),
				),
				'default'          => 'off',
				'default_on_front' => 'off',
				'tab_slug'         => 'advanced',
				'toggle_slug'      => 'width',
				'description'      => esc_html__( 'Whether or not to enable custom image width.', 'all-in-one-carousel-for-divi' ),
			),
			'image_width' => array(
				'label'            => esc_html__( 'Image Width', 'all-in-one-carousel-for-divi' ),
				'description'      => esc_html__( "Adjust the image width within the slide.", 'all-in-one-carousel-for-divi' ),
				'type'             => 'range',
				'option_category'  => 'layout',
				'tab_slug'         => 'advanced',
				'toggle_slug'      => 'width',
				'default'          => '100%',
				'default_on_front' => '100%',
				'default_unit'     => '%',
				'allowed_units'    => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
				'range_settings'   => array(
					'min'  => '1',
					'max'  => '100',
					'step' => '1',
				),
				'show_if'           => array(
					'enable_custom_image_width' => 'on',
				),
				'mobile_options'  => true,
				'sticky'          => true,
			),
			'image_align' => array(
				'label'            => esc_html__( 'Image Alignment', 'all-in-one-carousel-for-divi' ),
				'type'             => 'text_align',
				'option_category'  => 'layout',
				'options'          => et_builder_get_text_orientation_options( array( 'justified' ) ),
				'default_on_front' => 'center',
				'show_if'          => array(
					'enable_custom_image_width' => 'on',
				),
				'tab_slug'         => 'advanced',
				'toggle_slug'      => 'width',
				'description'      => esc_html__( 'Here you can choose the image alignment.', 'all-in-one-carousel-for-divi' ),
				'options_icon'     => 'module_align',
			),
			'enable_custom_image_height' => array(
				'label'            => esc_html__( 'Enable Custom Image Height', 'all-in-one-carousel-for-divi' ),
				'type'             => 'yes_no_button',
				'option_category'  => 'configuration',
				'options'          => array(
					'on'  => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ),
					'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ),
				),
				'default' 		   => 'off',
				'default_on_front' => 'off',
				'tab_slug'         => 'advanced',
				'toggle_slug'      => 'width',
				'description'      => esc_html__( 'Enable or disable Custom slide image height.', 'all-in-one-carousel-for-divi' ),
			),
			'custom_slide_image_height' => array(
				'label'            => esc_html__( 'Custom Image Height', 'all-in-one-carousel-for-divi' ),
				'type'             => 'range',
				'option_category'  => 'font_option',
				'range_settings'   => array(
					'min'  => '1',
					'max'  => '1000',
					'step' => '1',
				),
				'show_if'           => array(
					'enable_custom_image_height' => 'on',
				),
				'fixed_unit'	   => 'px',
				'default'          => '300px',
				'default_on_front' => '300px',
				'mobile_options'   => true,
				'tab_slug'         => 'advanced',
				'toggle_slug'      => 'width',
				'description'      => esc_html__( 'Custom slide image height.', 'all-in-one-carousel-for-divi' ),
			),
			'image_custom_padding' => array(
				'label'           => esc_html__( 'Image Padding', 'all-in-one-carousel-for-divi' ),
				'type'            => 'custom_padding',
				'option_category' => 'layout',
				'mobile_options'  => true,
				'hover'           => false,
				'show_if_not'               => array(
					'enable_custom_image_width' => 'on',
				),
				'default'          => '||||true|true',
				'default_on_front' => '||||true|true',
				'tab_slug'         => 'advanced',
				'toggle_slug'      => 'image',
				'description'      => esc_html__( 'Padding adds extra space to the inside of the element, increasing the distance between the edge of the element and its inner contents.', 'all-in-one-carousel-for-divi' ),
			),
			'slider_container_custom_padding' => array(
				'label'            => esc_html__( 'Slider Container Padding', 'all-in-one-carousel-for-divi' ),
				'type'             => 'custom_padding',
				'option_category'  => 'layout',
				'mobile_options'   => true,
				'hover'            => false,
				'default'          => '',
				'default_on_front' => '',
				'tab_slug'         => 'advanced',
				'toggle_slug'      => 'margin_padding',
				'description'      => esc_html__( 'Padding adds extra space to the inside of the element, increasing the distance between the edge of the element and its inner contents.', 'all-in-one-carousel-for-divi' ),
			),
		);
	}

	public function before_render() {
		global $aioc_cc_parent_icon_font_size, $slide_effect, $aioc_tc_disable_lazyload;
		$slide_effect 				   = $this->props['slide_effect'];
		$aioc_tc_disable_lazyload      = $this->props['disable_lazyload'];
		$aioc_cc_parent_icon_font_size = et_pb_responsive_options()->get_property_values( $this->props, 'icon_font_size' );
	}

	public function render( $attrs, $content, $render_slug ) {
		$show_tooltip_arrow 	       = $this->props['show_tooltip_arrow'];
		$select_layout 			 	   = $this->props['select_layout'];
		$slide_effect 				   = $this->props['slide_effect'];
		$cards_per_slide			   = $this->props['cards_per_slide'];
		$slider_loop 				   = $this->props['slider_loop'];
		$autoplay 					   = $this->props['autoplay'];
		$autoplay_speed 			   = $this->props['autoplay_speed'];
		$pause_on_hover 			   = $this->props['pause_on_hover'];
		$transition_duration		   = $this->props['transition_duration'];
		$enable_custom_image_height	   = $this->props['enable_custom_image_height'];
		$custom_slide_image_height	   = $this->props['custom_slide_image_height'];
		$show_arrow 				   = $this->props['show_arrow'];
		$show_arrow_on_hover 		   = $this->props['show_arrow_on_hover'];
		$arrows_position			   = et_pb_responsive_options()->get_property_values( $this->props, 'arrows_position' );
		$arrows_position			   = array_filter( $arrows_position );
		$show_control_dot 			   = $this->props['show_control_dot'];
		$control_dot_style 			   = $this->props['control_dot_style'];
		$content_alignment			   = $this->props['content_alignment'];
		$enable_custom_image_width	   = $this->props['enable_custom_image_width'];
		$space_between_arrows 		   = $this->props['space_between_arrows'];
		$arrow_color				   = $this->props['arrow_color'];
		$arrow_color_hover			   = $this->get_hover_value( 'arrow_color' );
		$arrow_background_color        = $this->props['arrow_background_color'];
		$arrow_background_color_hover  = $this->get_hover_value( 'arrow_background_color' );
		$arrow_background_border_size  = $this->props['arrow_background_border_size'];
		$arrow_background_border_color = $this->props['arrow_background_border_color'];
		$arrows_border_radius          = explode( '|', $this->props['arrows_border_radius'] );
		$control_dot_active_color      = $this->props['control_dot_active_color'];
		$control_dot_inactive_color    = $this->props['control_dot_inactive_color'];
		$number_dot_text_color         = $this->props['number_dot_text_color'];
		$image_align				   = $this->props['image_align'];
		$image_border_radius           = '' !== $this->props['border_radii_image'] ? explode( '|', $this->props['border_radii_image'] ) : '';
		$tooltip_arrow_color		   = $this->props['tooltip_arrow_color'];
		$inacitve_progressbar_color    = $this->props['inacitve_progressbar_color'];
		$acitve_progressbar_color	   = $this->props['acitve_progressbar_color'];
		$progressbar_height 		   = et_pb_responsive_options()->get_property_values( $this->props, 'progressbar_height' );
		$switch_background_color	   = $this->props['switch_background_color'];
		$switch_width 				   = et_pb_responsive_options()->get_property_values( $this->props, 'switch_width' );
		$switch_height 				   = et_pb_responsive_options()->get_property_values( $this->props, 'switch_height' );
		$enable_fullwidth_label		   = $this->props['enable_fullwidth_label'];
		$label_align				   = $this->props['label_align'];
		$label_background_color		   = $this->props['label_background_color'];

		if ( $this->content && '' !== $this->content ) {

			wp_enqueue_script( 'elicus-swiper-script' );
			wp_enqueue_style( 'elicus-swiper-style' );
			wp_enqueue_style( 'aioc-swiper-style' );

			$carousel  = '<div class="aioc_swiper_wrapper">';
			$carousel .= '<div class="aioc_slide_carousel_layout aioc_swiper_inner_wrap '.$select_layout.'">';
			$carousel .= '<div class="swiper-container">';
			$carousel .= '<div class="swiper-wrapper">';
			$carousel .= $this->content;
			$carousel .= '</div> <!-- swiper-wrapper -->';
			$carousel .= '<div class="aioc_timeline"></div>';
			$carousel .= '<div class="aioc_timeline_active"></div>';
			$carousel .= '</div> <!-- swiper-container -->';

			wp_enqueue_script( 'aioc-timeline-carousel-custom', ALL_IN_ONE_CAROUSEL_FOR_DIVI_PATH ."includes/modules/TimelineCarousel/aioc-timeline-carousel-custom.min.js", array('jquery'), '1.0.0', true );					
	
			if ( 'on' === $show_arrow ) {
				$next = sprintf(
					'<div class="swiper-button-next"%1$s></div>',
					'' !== $this->props['next_slide_arrow'] ?
					sprintf(
						' data-next_slide_arrow="%1$s"',
						esc_attr( et_pb_process_font_icon( $this->props['next_slide_arrow'] ) )
					) :
					''
				);
				$prev = sprintf(
					'<div class="swiper-button-prev"%1$s></div>',
					'' !== $this->props['previous_slide_arrow'] ?
					sprintf(
						' data-previous_slide_arrow="%1$s"',
						esc_attr( et_pb_process_font_icon( $this->props['previous_slide_arrow'] ) )
					) :
					''
				);
				if ( ! empty( $arrows_position ) ) {
					$arrows_position_data = '';
					foreach( $arrows_position as $device => $value ) {
						$arrows_position_data .= ' data-arrows_' . $device . '="' . $value . '"';
					}
				}
				$carousel .= sprintf(
					'<div class="aioc_swiper_navigation"%3$s>%1$s %2$s</div>',
					$next,
					$prev,
					! empty( $arrows_position ) ? $arrows_position_data : ''
				);
			}
			$carousel .= '</div> <!-- aioc_slide_carousel_layout -->';

			if ( 'on' === $show_control_dot ) {
				$carousel .= sprintf(
					'<div class="aioc_swiper_pagination"><div class="swiper-pagination %1$s"></div></div>',
					esc_attr( $control_dot_style )
				);
			}
			$carousel .= '</div> <!-- aioc_swiper_wrapper -->';

			$script = $this->aioc_render_slider_script();
			$output = $carousel . $script;

			$icon_font_size = et_pb_responsive_options()->get_property_values( $this->props, 'icon_font_size' );
			$icon_color     = et_pb_responsive_options()->get_property_values( $this->props, 'icon_color' );
			et_pb_responsive_options()->generate_responsive_css( $icon_font_size, '%%order_class%% .aioc_timeline_carousel_icon', 'font-size', $render_slug, '', 'range' );
			et_pb_responsive_options()->generate_responsive_css( $icon_color, '%%order_class%% .aioc_timeline_carousel_icon', 'color', $render_slug, '', 'color' );
			$icon_color_hover    = $this->get_hover_value( 'icon_color' );
			if ( $icon_color_hover ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_timeline_carousel_icon:hover',
					'declaration' => sprintf( 'color: %1$s !important;', esc_attr( $icon_color_hover ) ),
				) );
			}

			// Content Alignment.
			if ( 'top_left' === $content_alignment ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_timeline_carousel_item .aioc_slide_image_wrapper',
					'declaration' => 'width: 100% !important; text-align: left;',
				) );
			} elseif ( 'top_right' === $content_alignment ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_timeline_carousel_item .aioc_slide_inner_content_wrapper',
					'declaration' => 'align-items: flex-end; justify-content: flex-start; text-align: right;',
				) );
			} elseif ( 'top_center' === $content_alignment ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_timeline_carousel_item .aioc_slide_inner_content_wrapper',
					'declaration' => 'align-items: center; justify-content: flex-start; text-align: center;',
				) );
			} elseif ( 'center' === $content_alignment ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_timeline_carousel_item .aioc_slide_inner_content_wrapper',
					'declaration' => 'justify-content: center; align-items: center; text-align: center;',
				) );
			} elseif ( 'bottom_left' === $content_alignment ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_timeline_carousel_item .aioc_slide_inner_content_wrapper',
					'declaration' => 'align-items: flex-start; justify-content: flex-end; text-align: left;',
				) );
			} elseif ( 'bottom_right' === $content_alignment ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_timeline_carousel_item .aioc_slide_inner_content_wrapper',
					'declaration' => 'align-items: flex-end; justify-content: flex-end; text-align: right;',
				) );
			} elseif ( 'bottom_center' === $content_alignment ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_timeline_carousel_item .aioc_slide_inner_content_wrapper',
					'declaration' => 'align-items: center; justify-content: flex-end; text-align: center;',
				) );
			} elseif ( 'left_center' === $content_alignment ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_timeline_carousel_item .aioc_slide_inner_content_wrapper',
					'declaration' => 'align-items: flex-start; justify-content: center; text-align: left;',
				) );
			} elseif ( 'right_center' === $content_alignment ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_timeline_carousel_item .aioc_slide_inner_content_wrapper',
					'declaration' => 'align-items: flex-end; justify-content: center; text-align: right;',
				) );
			}

			// Image Alignment.
			if ( 'left' === $image_align ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_timeline_carousel_item .aioc_slide_image_wrapper',
					'declaration' => 'margin-right: auto;',
				) );
			}
			if ( 'center' === $image_align ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_timeline_carousel_item .aioc_slide_image_wrapper',
					'declaration' => 'margin-right: auto; margin-left: auto;',
				) );
			}
			if ( 'right' === $image_align ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_timeline_carousel_item .aioc_slide_image_wrapper',
					'declaration' => 'margin-left: auto;',
				) );
			}

			// Item Tooltip CSS.
			if ( '' !== $this->props['tooltip_arrow_color'] ) {
				if ( 'layout1' === $this->props['select_layout'] ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .swiper-slide .aioc_slide_inner_wrapper:after',
						'declaration' => sprintf( 'border-top: 12px solid %1$s;', $this->props['tooltip_arrow_color'] )
					) );
				}
				if ( 'layout2' === $this->props['select_layout'] ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .layout2 .swiper-slide:nth-child(even) .aioc_slide_inner_wrapper:after',
						'declaration' => sprintf( 'border-bottom: 12px solid %1$s;', $this->props['tooltip_arrow_color'] ),
						'media_query' => self::get_media_query( 'min_width_981' ),
					) );
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .layout2 .swiper-slide:nth-child(odd) .aioc_slide_inner_wrapper:after',
						'declaration' => sprintf( 'border-top: 12px solid %1$s;', $this->props['tooltip_arrow_color'] ),
						'media_query' => self::get_media_query( 'min_width_981' ),
					) );
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .swiper-slide .aioc_slide_inner_wrapper:after',
						'declaration' => sprintf( 'border-top: 12px solid %1$s;', $this->props['tooltip_arrow_color'] ),
						'media_query' => self::get_media_query( 'max_width_980' ),
					) );
				}
			}

			// Show/Hide Tooltip Arrow.
			if ( 'on' !== $show_tooltip_arrow ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_slide_inner_wrapper:after',
					'declaration' => 'display: none;',
				) );
			}
			// Label Alignment.
			if ( 'left' === $label_align ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_slide_label_wrapper',
					'declaration' => 'text-align: left;',
				) );
			}
			if ( 'center' === $label_align ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_slide_label_wrapper',
					'declaration' => 'text-align: center;',
				) );
			}
			if ( 'right' === $label_align ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_slide_label_wrapper',
					'declaration' => 'text-align: right;',
				) );
			}

			// Label Fullwidth.
			if ( 'on' === $enable_fullwidth_label ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_slide_label_wrapper',
					'declaration' => 'width: 100%;',
				) );
			}
			if ( '' !== $label_background_color ) {	
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_slide_label_wrapper',
					'declaration' => sprintf( 'background-color: %1$s;', $label_background_color )
				) );
			}

			// Swicth Background Color.
			if ( '' !== $switch_background_color ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_slide_switch_wrapper',
					'declaration' => sprintf( 'background-color: %1$s;', $switch_background_color )
				) );
			}
			// Switch Width.
			if ( ! empty( array_filter( $switch_width ) ) ) {
				et_pb_responsive_options()->generate_responsive_css( $switch_width, '%%order_class%% .aioc_slide_switch_wrapper', 'width', $render_slug, '', 'type' );
			}
			// Switch Height.
			if ( ! empty( array_filter( $switch_height ) ) ) {
				et_pb_responsive_options()->generate_responsive_css( $switch_height, '%%order_class%% .aioc_slide_switch_wrapper', 'height', $render_slug, '', 'type' );
				et_pb_responsive_options()->generate_responsive_css( $switch_height, '%%order_class%% .aioc_slide_switch_wrapper', 'min-height', $render_slug, '', 'type' );
			}
	
			// Progressbar Color.
			if ( '' !== $inacitve_progressbar_color ) {	
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_swiper_wrapper .aioc_timeline',
					'declaration' => sprintf( 'background-color: %1$s;', $inacitve_progressbar_color ),
				) );
			}
			// Active Progressbar Color.
			if ( '' !== $acitve_progressbar_color ) {	
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_swiper_wrapper .aioc_timeline_active',
					'declaration' => sprintf( 'background-color: %1$s;', $acitve_progressbar_color ),
				) );
			}
			// ProgressBar Height.
			if ( ! empty( array_filter( $progressbar_height ) ) ) {
				et_pb_responsive_options()->generate_responsive_css( $progressbar_height, '%%order_class%% .aioc_swiper_wrapper .aioc_timeline_active, %%order_class%% .aioc_swiper_wrapper .aioc_timeline', 'height', $render_slug, '', 'type' );
			}

			// Pagination CSS.
			if ( 'on' === $show_control_dot ) {
				if ( $control_dot_inactive_color ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .swiper-pagination-bullet',
						'declaration' => sprintf( 'background: %1$s !important;', esc_attr( $control_dot_inactive_color ) ),
					) );
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .transparent_dot .swiper-pagination-bullet',
						'declaration' => sprintf( 'border-color: %1$s;', esc_attr( $control_dot_inactive_color ) ),
					) );
				}
				if ( $control_dot_active_color ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .swiper-pagination-bullet.swiper-pagination-bullet-active',
						'declaration' => sprintf( 'background: %1$s !important;', esc_attr( $control_dot_active_color ) ),
					) );
				}
				if ( 'stretched_dot' === $control_dot_style && $transition_duration ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .stretched_dot .swiper-pagination-bullet',
						'declaration' => sprintf( 'transition: all %1$sms ease !important;', intval( $transition_duration ) ),
					) );
				}
				if ( ! empty( $number_dot_text_color ) ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .swiper-pagination-bullet.number-bullet',
						'declaration' => sprintf( 'color: %1$s;', esc_attr( $number_dot_text_color ) ),
					) );
				}
			}

			// Arrow CSS.
			if ( 'on' === $show_arrow ) {
				if ( '' !== $arrows_border_radius ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .swiper-button-next, %%order_class%% .swiper-button-prev',
						'declaration' => sprintf( 'border-radius: %1$s %2$s %3$s %4$s;', 
							$arrows_border_radius[1],
							$arrows_border_radius[2],
							$arrows_border_radius[3],
							$arrows_border_radius[4]
						),
					) );
				}
				if ( isset( $space_between_arrows ) && '' !== $space_between_arrows ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_navigation .swiper-button-next',
						'declaration' => sprintf( 'margin-left: %1$s !important;', esc_attr( $space_between_arrows ) ),
					) );
				}
				if ( $arrow_color ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_navigation .swiper-button-prev, %%order_class%% .aioc_swiper_navigation .swiper-button-next',
						'declaration' => sprintf( 'color: %1$s !important;', esc_attr( $arrow_color ) ),
					) );
				}
				if ( $arrow_color_hover ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_navigation .swiper-button-prev:hover, %%order_class%% .aioc_swiper_navigation .swiper-button-next:hover',
						'declaration' => sprintf( 'color: %1$s !important;', esc_attr( $arrow_color_hover ) ),
					) );
				}

				$arrow_font_size = et_pb_responsive_options()->get_property_values( $this->props, 'arrow_font_size' );
				if ( ! empty( array_filter( $arrow_font_size ) ) ) {
					et_pb_responsive_options()->generate_responsive_css( $arrow_font_size, '%%order_class%% .aioc_swiper_navigation .swiper-button-prev, %%order_class%% .aioc_swiper_navigation .swiper-button-next', 'font-size', $render_slug, '', 'range' );
				}
				if ( '' !== $this->props['next_slide_arrow'] ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_navigation .swiper-button-next::after',
						'declaration' => 'display: flex; align-items: center; height: 100%; font-family: "ETmodules"; content: attr(data-next_slide_arrow);',
					) );
				}
				if ( '' !== $this->props['previous_slide_arrow'] ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_navigation .swiper-button-prev::after',
						'declaration' => 'display: flex; align-items: center; height: 100%; font-family: "ETmodules"; content: attr(data-previous_slide_arrow);',
					) );
				}

				if ( 'on' === $show_arrow_on_hover ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_navigation .swiper-button-prev',
						'declaration' => 'visibility: hidden; opacity: 0; transition: all 300ms ease;',
					) );
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_navigation .swiper-button-next',
						'declaration' => 'visibility: hidden; opacity: 0; transition: all 300ms ease;',
					) );
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%%:hover .aioc_swiper_navigation .swiper-button-prev, %%order_class%%:hover .aioc_swiper_navigation .swiper-button-next',
						'declaration' => 'visibility: visible; opacity: 1;',
					) );
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%%:hover .aioc_swiper_navigation .swiper-button-prev.swiper-button-disabled, %%order_class%%:hover .aioc_swiper_navigation .swiper-button-next.swiper-button-disabled',
						'declaration' => 'opacity: 0.35;',
					) );
					
					// Outside Slider.
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_arrows_outside .swiper-button-prev',
						'declaration' => 'left: 50px;',
					) );
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_arrows_outside .swiper-button-next',
						'declaration' => 'right: 50px;',
					) );
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%%:hover .aioc_arrows_outside .swiper-button-prev',
						'declaration' => 'left: 0;',
					) );
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%%:hover .aioc_arrows_outside .swiper-button-next',
						'declaration' => 'right: 0;',
					) );

					// Inside Slider.
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_arrows_inside .swiper-button-prev',
						'declaration' => 'left: -50px;',
					) );
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_arrows_inside .swiper-button-next',
						'declaration' => 'right: -50px;',
					) );
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%%:hover .aioc_arrows_inside .swiper-button-prev',
						'declaration' => 'left: 0;',
					) );
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%%:hover .aioc_arrows_inside .swiper-button-next',
						'declaration' => 'right: 0;',
					) );
				}

				if ( '' !== $arrow_background_color ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_navigation .swiper-button-prev, %%order_class%% .aioc_swiper_navigation .swiper-button-next',
						'declaration' => sprintf( 'background: %1$s !important;', esc_attr( $arrow_background_color ) ),
					) );
				}
				if ( '' !== $arrow_background_color_hover ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_navigation .swiper-button-prev:hover, %%order_class%% .aioc_swiper_navigation .swiper-button-next:hover',
						'declaration' => sprintf( 'background: %1$s !important;', esc_attr( $arrow_background_color_hover ) ),
					) );
				}
				if ( '' !== $arrow_background_border_size ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_navigation .swiper-button-prev, %%order_class%% .aioc_swiper_navigation .swiper-button-next',
						'declaration' => sprintf( 'border-width: %1$s;', esc_attr( $arrow_background_border_size ) ),
					) );
				}
				if ( '' !== $arrow_background_border_color ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_navigation .swiper-button-prev, %%order_class%% .aioc_swiper_navigation .swiper-button-next',
						'declaration' => sprintf( 'border-color: %1$s;', esc_attr( $arrow_background_border_color ) ),
					) );
				}
				$arrow_background_border_color_hover = $this->get_hover_value( 'arrow_background_border_color' );
				if ( '' !== $arrow_background_border_color_hover ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_navigation .swiper-button-prev:hover, %%order_class%% .aioc_swiper_navigation .swiper-button-next:hover',
						'declaration' => sprintf( 'border-color: %1$s;', esc_attr( $arrow_background_border_color_hover ) ),
					) );
				}
			}

			$enable_linear_transition = $this->props['enable_linear_transition'];
			if ( 'on' === $enable_linear_transition ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .swiper-wrapper',
					'declaration' => 'transition-timing-function : linear !important;',
				) );
			}

			if ( 'on' === $enable_custom_image_width ) { 
				if ( isset( $this->props['image_width'] ) && '' !== $this->props['image_width'] ) {
					// Image Width.
					$this->generate_styles( array(
						'hover'                           => false,
						'base_attr_name'                  => 'image_width',
						'selector'                        => '%%order_class%% .aioc_timeline_carousel_item .aioc_slide_image_wrapper',
						'sticky_pseudo_selector_location' => 'prefix',
						'css_property'                    => 'width',
						'important'                       => true,
						'render_slug'                     => $render_slug,
						'type'                            => 'range',
					) );
				}
			}
			if ( 'on' === $enable_custom_image_height ) { 
				if ( isset( $this->props['custom_slide_image_height'] ) && '' !== $this->props['custom_slide_image_height'] ) {
					// Image Width.
					$this->generate_styles( array(
						'hover'                           => false,
						'base_attr_name'                  => 'custom_slide_image_height',
						'selector'                        => '%%order_class%% .aioc_timeline_carousel_item img',
						'sticky_pseudo_selector_location' => 'prefix',
						'css_property'                    => 'height',
						'important'                       => true,
						'render_slug'                     => $render_slug,
						'type'                            => 'range',
					) );
				}
			}

			// Equalize Slide Height CSS.
			self::set_style( $render_slug, array(
				'selector'    => '%%order_class%% .aioc_timeline_carousel_item',
				'declaration' => 'height: auto; margin-bottom: 0 !important;',
			) );
			self::set_style( $render_slug, array(
				'selector'    => '%%order_class%% .aioc_timeline_carousel_item .aioc_slide_content_wrapper',
				'declaration' => 'flex-grow: 1;',
			) );

		} else {
			$output  = '<div class="entry">';
			$output  = '<h1>' . esc_html__( 'No Result Found!', 'all-in-one-carousel-for-divi' ) . '</h1>';
			$output .= '<p>' . esc_html__( 'The carousel you requested could not be found. Try changing your module settings or add some new slides.', 'all-in-one-carousel-for-divi' ) . '</p>';
			$output .= '</div>';
		}

		$this->add_classname( array(
			$this->get_text_orientation_classname(),
		) );

		$fields = array( 'slider_margin_padding' );
		AIOC_Helper::process_advanced_margin_padding_css( $this, $render_slug, $this->margin_padding, $fields );

		$file = et_is_builder_plugin_active() ? 'style-dbp' : 'style';
		wp_enqueue_style( 'aioc-timeline-carousel-style', ALL_IN_ONE_CAROUSEL_FOR_DIVI_PATH . 'includes/modules/TimelineCarousel/' . $file . '.min.css', array(), '1.0.0' );
		
		return et_core_intentionally_unescaped( $output, 'html' );
	}

	/**
	 * This function dynamically creates script parameters according to the user settings
	 *
	 * @return string
	 * */
	public function aioc_render_slider_script() {
		$order_class     		  = $this->get_module_order_class( 'aioc_timeline_carousel' );
		$slide_effect          	  = esc_attr( $this->props['slide_effect'] );
		$show_arrow            	  = esc_attr( $this->props['show_arrow'] );
		$autoplay              	  = esc_attr( $this->props['autoplay'] );
		$autoplay_speed        	  = intval( $this->props['autoplay_speed'] );
		$transition_duration  	  = intval( $this->props['transition_duration'] );
		$autoplay_speed      	  = '' !== $autoplay_speed || 0 !== $autoplay_speed ? $autoplay_speed : 3000;
		$transition_duration 	  = '' !== $transition_duration || 0 !== $transition_duration ? $transition_duration : 1000;
		$pause_on_hover        	  = esc_attr( $this->props['pause_on_hover'] );
		$loop          			  = 'on' === esc_attr( $this->props['slider_loop'] ) ? 'true' : 'false';
		$cards_per_slide 		  = et_pb_responsive_options()->get_property_values( $this->props, 'cards_per_slide', '', true );
		$space_between_slides 	  = et_pb_responsive_options()->get_property_values( $this->props, 'space_between_slides', '', true );
		$slides_per_group 		  = et_pb_responsive_options()->get_property_values( $this->props, 'slides_per_group', '', true );
		$show_control_dot         = esc_attr( $this->props['show_control_dot'] );
		$dynamic_bullets		  = 'on' === $this->props['enable_dynamic_dots'] && in_array( $this->props['control_dot_style'], array( 'solid_dot', 'transparent_dot', 'square_dot', 'number_dot' ), true ) ? 'true' : 'false';
		$dots 					  = 'false';
		$arrows 				  = 'false';
		$autoplaySlides			  = 0;
		$cube 					  = 'false';	
		$slidesPerGroupSkip		  = 0;
		$slidesPerGroupSkipIpad	  = 0;
		$slidesPerGroupSkipMobile = 0;
		$slidesPerGroup 		  = 1;
		$slidesPerGroupIpad	   	  = 1;
		$slidesPerGroupMobile	  = 1;

		if ( in_array( $slide_effect, array( 'slide' ), true ) ) {
			$cards_per_view        		= $cards_per_slide['desktop'];
			$cards_per_view_ipad   		= '' !== $cards_per_slide['tablet'] ? $cards_per_slide['tablet'] : $cards_per_view;
			$cards_per_view_mobile 		= '' !== $cards_per_slide['phone'] ? $cards_per_slide['phone'] : $cards_per_view_ipad;
			$cards_space_between   		= $space_between_slides['desktop'];
			$cards_space_between_ipad  	= '' !== $space_between_slides['tablet'] ? $space_between_slides['tablet'] : $cards_space_between;
			$cards_space_between_mobile = '' !== $space_between_slides['phone'] ? $space_between_slides['phone'] : $cards_space_between_ipad;
			$slidesPerGroup 			= $slides_per_group['desktop'];
			$slidesPerGroupIpad			= '' !== $slides_per_group['tablet'] ? $slides_per_group['tablet'] : $slidesPerGroup;
			$slidesPerGroupMobile		= '' !== $slides_per_group['phone'] ? $slides_per_group['phone'] : $slidesPerGroupIpad;

			if ( $cards_per_view > $slidesPerGroup && 1 !== $slidesPerGroup ) {
				$slidesPerGroupSkip = $cards_per_view - $slidesPerGroup;
			}
			if ( $cards_per_view_ipad > $slidesPerGroupIpad && 1 !== $slidesPerGroupIpad ) {
				$slidesPerGroupSkipIpad = $cards_per_view_ipad - $slidesPerGroupIpad;
			}
			if ( $cards_per_view_mobile > $slidesPerGroupMobile && 1 !== $slidesPerGroupMobile ) {
				$slidesPerGroupSkipMobile = $cards_per_view_mobile - $slidesPerGroupMobile;
			}
		} else {
			$cards_per_view        		= 1;
			$cards_per_view_ipad   		= 1;
			$cards_per_view_mobile 		= 1;
			$cards_space_between   		= 0;
			$cards_space_between_ipad	= 0;
			$cards_space_between_mobile	= 0;
		}

		if ( 'on' === $show_arrow ) {
			$arrows = "{    
				nextEl: '." . esc_attr( $order_class ) . " .swiper-button-next',
				prevEl: '." . esc_attr( $order_class ) . " .swiper-button-prev',
			}";
		}
		if ( 'on' === $show_control_dot ) {
			$number_dot = 'false';
			if ( 'number_dot' === $this->props['control_dot_style'] ) {
				$number_dot = "function (index, className) {
					return '<span class=\"' + className + ' number-bullet\">' + (index + 1) + ' </span>';
				}";
			}
			$dots = "{
				el: '." . esc_attr( $order_class ) . " .swiper-pagination',
				dynamicBullets: " . $dynamic_bullets . ",
				clickable: true,
				renderBullet: " . $number_dot . ",
			}";
		}
		if ( 'on' === $autoplay ) {
			if ( 'on' === $pause_on_hover ) {
				$autoplaySlides = '{
					delay:' . $autoplay_speed . ',
					disableOnInteraction: true,
				}';
			} else {
				$autoplaySlides = '{
					delay:' . $autoplay_speed . ',
					disableOnInteraction: false,
				}';
			}
		}
		if ( 'cube' === $slide_effect ) {
			$cube = '{
				shadow: false,
				slideShadows: false,
			}';
		}

		$script  = '<script type="text/javascript">';
		$script .= 'jQuery(function($) {';

		$script .= 'var ' . esc_attr( $order_class ) . '_swiper = new Swiper(\'.' . esc_attr( $order_class ) . ' .swiper-container\', {
				slidesPerView: ' . $cards_per_view . ',
				autoplay: ' . $autoplaySlides . ',
				spaceBetween: ' . intval( $cards_space_between ) . ',
				slidesPerGroup: ' . $slidesPerGroup . ',
				slidesPerGroupSkip: ' . $slidesPerGroupSkip . ',
				effect: "' . $slide_effect . '",
				cubeEffect: ' . $cube . ',
				speed: ' . $transition_duration . ',
				loop: ' . $loop . ',
				pagination: ' . $dots . ',
				navigation: ' . $arrows . ',
				grabCursor: \'true\',
				observer: true,
				observeParents: true,
				breakpoints: {
					981: {
						slidesPerView: ' . $cards_per_view . ',
						spaceBetween: ' . intval( $cards_space_between ) . ',
						slidesPerGroup: ' . $slidesPerGroup . ',
						slidesPerGroupSkip: ' . $slidesPerGroupSkip . ',
					},
					768: {
						slidesPerView: ' . $cards_per_view_ipad . ',
						spaceBetween: ' . intval( $cards_space_between_ipad ) . ',
						slidesPerGroup: ' . $slidesPerGroupIpad . ',
						slidesPerGroupSkip: ' . $slidesPerGroupSkipIpad . ',
					},
					0: {
						slidesPerView: ' . $cards_per_view_mobile . ',
						spaceBetween: ' . intval( $cards_space_between_mobile ) . ',
						slidesPerGroup: ' . $slidesPerGroupMobile . ',
						slidesPerGroupSkip: ' . $slidesPerGroupSkipMobile . ',
					}
				},
				on: {
					progress: function (swiper, progress) {
						var timelineLine = document.querySelector(\'.' . esc_attr( $order_class ) . ' .aioc_timeline_active\');
						var swiperWidth = swiper.$el[0].clientWidth; // Use clientWidth to get the actual width
						timelineLine.style.width = progress * swiperWidth + \'px\';
					},
				},
		} );';

		if ( 'on' === $pause_on_hover && 'on' === $autoplay ) {
			$script .= 'jQuery(".' . esc_attr( $order_class ) . ' .swiper-container").on("mouseenter", function(e) {
				if ( typeof ' . esc_attr( $order_class ) . '_swiper.autoplay.stop === "function" ) {
					' . esc_attr( $order_class ) . '_swiper.autoplay.stop();
				}
			});';
			$script .= 'jQuery(".' . esc_attr( $order_class ) . ' .swiper-container").on("mouseleave", function(e) {
				if ( typeof ' . esc_attr( $order_class ) . '_swiper.autoplay.start === "function" ) {
					' . esc_attr( $order_class ) . '_swiper.autoplay.start();
				}
			});';
		}

		if ( 'true' !== $loop ) {
			$script .=  esc_attr( $order_class ) . '_swiper.on(\'reachEnd\', function(){
				' . esc_attr( $order_class ) . '_swiper.autoplay = false;
			});';
		}
		$script .= '});</script>';

		return $script;
	}

}

new AIOC_TimelineCarousel;
