<?php

class AIOC_TeamCarousel extends ET_Builder_Module {

	public $slug       = 'aioc_team_carousel';
	public $child_slug = 'aioc_team_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 Team Carousel', 'all-in-one-carousel-for-divi' );
		$this->child_item_text  = esc_html__( 'Team Member', 'all-in-one-carousel-for-divi' );
		$this->main_css_element = '%%order_class%%';
	}

	public function get_settings_modal_toggles() {
		return array(
			'general'  => array(
				'toggles' => array(
					'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(
							'name' => array(
								'name' => 'Name',
							),
							'designation' => array(
								'name' => 'Designation',
							),
							'content' => array(
								'name' => 'Content',
							),
						),
						'tabbed_subtoggles' => true,
					),
					'image' => array(
						'title' => esc_html__( 'Image', 'all-in-one-carousel-for-divi' ),
					),
					'social_icon_settings'       => array(
						'title'    => esc_html__( 'Social Icons', 'all-in-one-carousel-for-divi' ),
					),
					'content_bg_settings' => array(
						'title' => esc_html__( 'Content Background', 'all-in-one-carousel-for-divi' ),
					),
					'coverflow_settings' => array(
						'title' => esc_html__( 'Coverflow', '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(
				'name' => array(
					'label'          => esc_html__( 'Name', '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_name',
						'important' => 'all',
					),
					'hide_text_align' => true,
					'tab_slug' => 'advanced',
					'toggle_slug' => 'text_settings',
					'sub_toggle' => 'name',
				),
				'designation' => array(
					'label'          => esc_html__( 'Designation', '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_designation',
						'important' => 'all',
					),
					'hide_text_align' => true,
					'tab_slug' => 'advanced',
					'toggle_slug' => 'text_settings',
					'sub_toggle' => 'designation',
				),
				'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',
				),
			),
			'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',
						),
					),
				),
				'social_icon' => array(
					'margin_padding' => array(
						'css' => array(
							'use_margin' => false,
							'padding'    => "{$this->main_css_element} .aioc_team_member_social_icon",
							'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',
						),
					),
				),
			),
			'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',
							'important' => 'all',
						),
					),
					'tab_slug'       => 'advanced',
					'toggle_slug'    => 'image',
				),
				'team_member_icon'  => array(
					'css'          => array(
						'main' => array(
							'border_radii'  => '%%order_class%% .aioc_team_member_social_icon',
							'border_styles' => '%%order_class%% .aioc_team_member_social_icon',
							'important'     => 'all',
						),
					),
					'label_prefix' => esc_html__( 'Social Icon', 'all-in-one-carousel-for-divi' ),
					'tab_slug'     => 'advanced',
					'toggle_slug'  => 'social_icon_settings',
				),
				'default' => array(
					'css' => array(
						'main' => array(
							'border_radii'  => $this->main_css_element,
							'border_styles' => $this->main_css_element,
						),
					),
				),
			),
			'box_shadow' => array(
				'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() {
		return array_merge(
			array(
				'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' ),
						'layout3' => esc_html__( 'Layout 3', 'all-in-one-carousel-for-divi' ),
						'layout4' => esc_html__( 'Layout 4', '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' ),
						'coverflow' => esc_html__( 'Coverflow', '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', 'coverflow' ),
					),
					'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', 'coverflow' ),
					),
					'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', 'coverflow' ),
					),
					'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' ),
				),
				'slide_center_mode' => array(
					'label'            => esc_html__( 'Slide Center Mode', '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(
						'slide_effect' => array('slide'),
					),
					'default'           => 'off',
					'default_on_front'  => 'off',
					'tab_slug'          => 'general',
					'toggle_slug'       => 'slider_settings',
					'sub_toggle'	  => 'general',
					'description'       => esc_html__( 'Whether or not to enable slide center mode.', 'all-in-one-carousel-for-divi' ),
				),
				'equalize_slides_height' => array(
					'label'            => esc_html__( 'Equalize Slides 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'         => 'general',
					'toggle_slug'      => 'slider_settings',
					'sub_toggle'	   => 'general',
					'description'      => esc_html__( 'Choose whether or not equalize slides height.', 'all-in-one-carousel-for-divi' ),
				),
				'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',
					'show_if'           => array(
						'equalize_slides_height' => 'on',
						'select_layout'          => array( 'layout1', 'layout3', 'layout4' ),
					),
					'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(
						'equalize_slides_height'     => 'on',
						'enable_custom_image_height' => 'on',
						'select_layout'              => array( 'layout1', 'layout3', 'layout4' ),
					),
					'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' ),
				),
				'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' ),
				),
				'social_icon_size' => array(
					'label'           	=> esc_html__( 'Social Icon Size', 'all-in-one-carousel-for-divi' ),
					'type'            	=> 'range',
					'option_category' 	=> 'font_option',
					'range_settings'  	=> array(
						'min'  => '1',
						'max'  => '100',
						'step' => '1',
					),
					'mobile_options'  	=> true,
					'default'         	=> '16px',
					'default_on_front'	=> '16px',
					'tab_slug'        	=> 'advanced',
					'toggle_slug'     	=> 'social_icon_settings',
					'description'     	=> esc_html__( 'Move the slider or input the value to increase or decrease team member social icon size.', 'all-in-one-carousel-for-divi' ),
				),
				'social_icon_color' => array(
					'label'        => esc_html__( 'Social Icon Color', 'all-in-one-carousel-for-divi' ),
					'type'         => 'color-alpha',
					'custom_color' => true,
					'hover'        => 'tabs',
					'tab_slug'     => 'advanced',
					'toggle_slug'  => 'social_icon_settings',
					'description'  => esc_html__( 'Here you can choose a custom color to be used for the social icon.', 'all-in-one-carousel-for-divi' ),
				),
				'social_icon_background_color' => array(
					'label'        => esc_html__( 'Social Icon Background Color', 'all-in-one-carousel-for-divi' ),
					'type'         => 'color-alpha',
					'custom_color' => true,
					'hover'        => 'tabs',
					'tab_slug'     => 'advanced',
					'toggle_slug'  => 'social_icon_settings',
					'description'  => esc_html__( 'Here you can choose a custom color to be used for the social icon background.', 'all-in-one-carousel-for-divi' ),
				),
				'social_icon_custom_padding' => array(
					'label'                 => esc_html__( 'Social Icon 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'           => 'social_icon_settings',
					'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' ),
				),
				'enable_coverflow_shadow' => array(
					'label'            => esc_html__( 'Enable Slide Shadow', '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(
						'slide_effect' => 'coverflow',
					),
					'tab_slug'         => 'advanced',
					'toggle_slug'      => 'coverflow_settings',
					'description'      => esc_html__( 'Enable Slide Shadow For Coverflow Effect.', 'all-in-one-carousel-for-divi' ),
				),
				'coverflow_shadow_color' => array(
					'label'        	   => esc_html__( 'Shadow Color', 'all-in-one-carousel-for-divi' ),
					'type'         	   => 'color-alpha',
					'custom_color' 	   => true,
					'show_if'          => array(
						'slide_effect' => 'coverflow',
						'enable_coverflow_shadow' => 'on',
					),
					'default'      	   => '#ccc',
					'tab_slug'         => 'advanced',
					'toggle_slug'      => 'coverflow_settings',
					'description'      => esc_html__( 'Here you can select color for the Shadow.', 'all-in-one-carousel-for-divi' ),
				),
				'coverflow_rotate' => array(
					'label'            => esc_html__( 'Coverflow Rotate', 'all-in-one-carousel-for-divi' ),
					'type'             => 'range',
					'option_category'  => 'font_option',
					'range_settings'   => array(
						'min'  => '1',
						'max'  => '360',
						'step' => '1',
					),
					'unitless'         => true,
					'show_if'          => array(
						'slide_effect' => 'coverflow',
					),
					'default'          => '40',
					'mobile_options'   => true,
					'tab_slug'         => 'advanced',
					'toggle_slug'      => 'coverflow_settings',
					'description'      => esc_html__( 'Coverflow Rotate Slide.', 'all-in-one-carousel-for-divi' ),
				),
				'coverflow_depth' => array(
					'label'            => esc_html__( 'Coverflow Depth', 'all-in-one-carousel-for-divi' ),
					'type'             => 'range',
					'option_category'  => 'font_option',
					'range_settings'   => array(
						'min'  => '1',
						'max'  => '1000',
						'step' => '1',
					),
					'unitless'         => true,
					'show_if'          => array(
						'slide_effect' => 'coverflow',
					),
					'default'          => '100',
					'mobile_options'   => true,
					'tab_slug'         => 'advanced',
					'toggle_slug'      => 'coverflow_settings',
					'description'      => esc_html__( 'Coverflow Depth Slide.', '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' ),
				),
				'force_fullwidth_image' => array(
					'label'            => esc_html__( 'Force Fullwidth Image', '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(
						'select_layout' => array('layout1'),
					),
					'default'           => 'on',
					'default_on_front'  => 'on',
					'tab_slug'       => 'advanced',
					'toggle_slug'    => 'width',
					'description'       => esc_html__( 'Whether or not to enable custom image width.', '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' ),
					),
					'show_if'               => array(
						'select_layout' => array('layout2'),
					),
					'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'           => '50%',
					'default_on_front'  => '50%',
					'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',
						'select_layout' => array('layout2'),
					),
					'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(
						'select_layout' => array('layout1', 'layout2'),
					),
					'tab_slug'       	=> 'advanced',
					'toggle_slug'   	=> 'image',
					'description'      => esc_html__( 'Here you can choose the image alignment.', 'all-in-one-carousel-for-divi' ),
					'options_icon'     => 'module_align',
				),
				'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' ),
				),
				'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,
					'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' ),
				),
				'content_bg_color' => array(
					'label'                 => esc_html__( 'Content Background', 'all-in-one-carousel-for-divi' ),
					'type'                  => 'background-field',
					'base_name'             => 'content_bg',
					'context'               => 'content_bg_color',
					'option_category'       => 'button',
					'custom_color'          => true,
					'background_fields'     => $this->generate_background_options( 'content_bg', 'button', 'advanced', 'content_bg_settings', 'content_bg_color' ),
					'hover'                 => 'tabs',
					'mobile_options'        => true,
					'default'      			=> 'rgba(244,244,244,0.7)',
					'tab_slug'              => 'advanced',
					'toggle_slug'           => 'content_bg_settings',
					'description'           => esc_html__( 'Customize the background style of the content box by adjusting the background color, gradient, and image.', 'all-in-one-carousel-for-divi' ),
				),
			),
			$this->generate_background_options( 'content_bg', 'skip', 'advanced', 'content_bg_settings', 'content_bg_color' )
		);
	}

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

	public function render( $attrs, $content, $render_slug ) {
		$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'];
		$slide_center_mode 			   = $this->props['slide_center_mode'] === 'on' ? true : 'false';
		$equalize_slides_height		   = $this->props['equalize_slides_height'];
		$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'];
		$select_layout				   = $this->props['select_layout'];
		$content_alignment			   = $this->props['content_alignment'];
		$force_fullwidth_image	       = $this->props['force_fullwidth_image'];
		$enable_custom_image_width	   = $this->props['enable_custom_image_width'];
		$social_icon_size              = et_pb_responsive_options()->get_property_values( $this->props, 'social_icon_size' );
		$social_icon_color             = esc_attr( $this->props['social_icon_color'] );
		$social_icon_background_color  = esc_attr( $this->props['social_icon_background_color'] );
		$enable_coverflow_shadow 	   = $this->props['enable_coverflow_shadow'];
		$coverflow_shadow_color 	   = $this->props['coverflow_shadow_color'];
		$coverflow_rotate 			   = $this->props['coverflow_rotate'];
		$coverflow_depth 			   = $this->props['coverflow_depth'];
		$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_border_radius           = '' !== $this->props['border_radii_image'] ? explode( '|', $this->props['border_radii_image'] ) : '';
		$slide_center_mode             = 'slide' === $this->props['slide_effect'] ? $slide_center_mode : false;
		$image_align				   = $this->props['image_align'];
		
		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> <!-- swiper-container -->';

			if ( 'on' === $show_arrow && ! empty( $arrows_position ) ) {
				wp_enqueue_script( 'aioc-team-carousel-custom', ALL_IN_ONE_CAROUSEL_FOR_DIVI_PATH ."includes/modules/TeamCarousel/aioc-team-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;

			// Slide Center Mode.
			if ( 'on' === $this->props['slide_center_mode'] ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .swiper-slide:not(.swiper-slide-active) .aioc_slide_wrapper',
					'declaration' => 'transition: all 0.4s; transform: scale(0.8);',
				) );
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .swiper-slide.swiper-slide-active .aioc_slide_wrapper',
					'declaration' => 'transition: all 0.4s; transform: scale(1);',
				) );		
			}

			// Select Layout.
			if ( 'layout1' === $select_layout ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_wrapper',
					'declaration' => 'display: flex; flex-direction: column; height: 100%;',
				) );
				if ( 'on' !== $force_fullwidth_image ) { 
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_team_carousel_item div.aioc_slide_image_wrapper',
						'declaration' => 'width: auto !important;',
					) );
				}
			}
			if ( 'layout1' === $select_layout || 'layout2' === $select_layout ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .et_pb_module_inner',
					'declaration' => 'height: 100%;',
				) );
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_content_wrapper',
					'declaration' => 'flex-grow: 1;',
				) );
			}
			if ( 'layout2' === $select_layout ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_wrapper',
					'declaration' => 'display: flex; flex-direction: row; height: 100%;',
				) );
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_image_wrapper .aioc_slide_image',
					'declaration' => 'object-fit: cover; width: 100%; height: 100%;',
				) );  
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_content_wrapper',
					'declaration' => 'display: flex;',
				) );

				// Mobile CSS.
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_wrapper',
					'declaration' => 'flex-direction: column;',
					'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
				) );
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_image_wrapper',
					'declaration' => 'width: 100% !important;',
					'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
				) );
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_content_wrapper',
					'declaration' => 'width: auto;',
					'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
				) );

				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_team_carousel_item .aioc_slide_image_wrapper',
							'sticky_pseudo_selector_location' => 'prefix',
							'css_property'                    => 'width',
							'important'                       => true,
							'render_slug'                     => $render_slug,
							'type'                            => 'range',
						) );

						$image_width        = et_pb_responsive_options()->get_property_values( $this->props, 'image_width' );
						$image_width_tablet = '' !== $image_width['tablet'] ? $image_width['tablet'] : $image_width['desktop'];

						self::set_style( $render_slug,  array(
							'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_content_wrapper',
							'declaration' => sprintf( 'width: calc(100%% - %1$s);', esc_attr( $this->props['image_width'] ) ),
						) );		
						self::set_style( $render_slug, array(
							'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_content_wrapper',
							'declaration' => sprintf( 'width: calc(100%% - %1$s);', esc_attr( $image_width_tablet ) ),
							'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
						) );
					}		            
				} else {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_image_wrapper',
						'declaration' => 'width: 50%;',
					) );
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_content_wrapper',
						'declaration' => 'width: calc(100% - 50%);',
					) );					
				} 
			}
			if ( 'layout3' === $select_layout ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item',
					'declaration' => 'height: auto;',
				) );
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_wrapper',
					'declaration' => 'height: 100%;',
				) );
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_content_wrapper',
					'declaration' => 'position: absolute; top: 0;  bottom: 0; left: 0; right: 0; background: transparent;',
				) );
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_image_wrapper',
					'declaration' => 'width: 100%;',
				) );
				if ( '' !== $image_border_radius ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_inner_content_wrapper',
						'declaration' => sprintf( 'border-radius: %1$s %2$s %3$s %4$s;', 
							$image_border_radius[1],
							$image_border_radius[2],
							$image_border_radius[3],
							$image_border_radius[4]
						),
					) );
				}
			}
			if ( 'on' !== $enable_custom_image_width && ( 'layout3' === $select_layout || 'layout4' === $select_layout ) ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_image_wrapper',
					'declaration' => 'width: 100% !important;',
				) );
			}

			// Image Alignment.
			if ( 'left' === $image_align ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_image_wrapper',
					'declaration' => 'margin-right: auto;',
				) );
			}
			if ( 'center' === $image_align ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_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_team_carousel_item .aioc_slide_image_wrapper',
					'declaration' => 'margin-left: auto;',
				) );
			}

			// Content Alignment.
			if ( 'top_left' === $content_alignment ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_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_team_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_team_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_team_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_team_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_team_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_team_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_team_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_team_carousel_item .aioc_slide_inner_content_wrapper',
					'declaration' => 'align-items: flex-end; justify-content: center; text-align: right;',
				) );
			}
			
			// Coverflow CSS.
			if ( 'on' === $enable_coverflow_shadow ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .swiper-container-3d .swiper-slide-shadow-left',
					'declaration' => sprintf( 'background-image: linear-gradient(to left,%1$s,rgba(0,0,0,0)) !important;', esc_attr( $coverflow_shadow_color ) ),
				) );
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .swiper-container-3d .swiper-slide-shadow-right',
					'declaration' => sprintf( 'background-image: linear-gradient(to right,%1$s,rgba(0,0,0,0)) !important;', esc_attr( $coverflow_shadow_color ) ),
				) );
			} else {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .swiper-container-3d .swiper-slide-shadow-left, %%order_class%% .swiper-container-3d .swiper-slide-shadow-right',
					'declaration' => 'background-image: none !important;',
				) );
			}

			// Social Icon Css.
			if ( '' !== $social_icon_color ) {
				$this->generate_styles( array(
					'base_attr_name' => 'social_icon_color',
					'selector'       => '%%order_class%% .aioc_team_social_wrapper a, %%order_class%% .aioc_team_member_social_icon',
					'hover_selector' => '%%order_class%% .aioc_team_social_wrapper a:hover, %%order_class%% .aioc_team_member_social_icon:hover',
					'css_property'   => 'color',
					'priority'		 => 1000,
					'render_slug'    => $render_slug,
					'type'           => 'color',
				) );
			}
			if ( '' !== $social_icon_background_color ) {
				$this->generate_styles( array(
					'base_attr_name' => 'social_icon_background_color',
					'selector'       => '%%order_class%% .aioc_team_member_social_icon',
					'hover_selector' => '%%order_class%% .aioc_team_member_social_icon:hover',
					'css_property'   => 'background-color',
					'priority'		 => 1000,
					'render_slug'    => $render_slug,
					'type'           => 'color',
				) );
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_member_social_icon',
					'declaration' => 'padding: 5px;',
				) );
			}
	
			et_pb_responsive_options()->generate_responsive_css( $social_icon_size, '%%order_class%% .aioc_team_member_social_icon', 'font-size', $render_slug, '', 'range' );	

			// Slide Layout 3.
			if ( 'layout4' === $select_layout ) {			
				$icon_wrapper_spacing = '' !== $this->props['social_icon_custom_padding'] ? explode( '|', $this->props['social_icon_custom_padding'] ) : '';
				$total_padding        = absint( $this->props['social_icon_size'] ) + absint( $icon_wrapper_spacing[0] ) + absint( $icon_wrapper_spacing[2] ) + 10;

				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .layout4 .aioc_team_carousel_item .aioc_slide_content_wrapper',
					'declaration' => sprintf( 'bottom: -%1$spx;', esc_attr( $total_padding ) ),
					'media_query' => self::get_media_query( 'min_width_981' ),
				) );
			}

			// 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 ) ),
					) );
				}
			}

			// Equalize Slide Height CSS.
			if ( 'on' === $equalize_slides_height ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item',
					'declaration' => 'height: auto; margin-bottom: 0 !important;',
				) );
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .et_pb_module_inner',
					'declaration' => 'height: 100%;',
				) );
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc_team_carousel_item .aioc_slide_content_wrapper',
					'declaration' => 'flex-grow: 1;',
				) );
				if ( 'on' === $enable_custom_image_height ) {
					if ( '' !== $custom_slide_image_height ) {
						$custom_slide_image_heights = et_pb_responsive_options()->get_property_values( $this->props,'custom_slide_image_height' );
						self::set_style( $render_slug, array(
							'selector'    => '%%order_class%% .aioc_team_carousel_item img',
							'declaration' => sprintf( 'height: %1$s !important; object-fit: cover;', esc_attr( $custom_slide_image_height ) ),
						) );
						if ( '' !== $custom_slide_image_heights['desktop'] ) {
							self::set_style( $render_slug, array(
								'selector'    => '%%order_class%% .aioc_team_carousel_item img',
								'declaration' => sprintf( 'height: %1$s !important; object-fit: cover;', esc_attr( $custom_slide_image_heights['desktop'] ) ),
							) );
						}
						if ( '' !== $custom_slide_image_heights['tablet'] ) {
							self::set_style( $render_slug, array(
								'selector'    => '%%order_class%% .aioc_team_carousel_item img',
								'declaration' => sprintf( 'height: %1$s !important; object-fit: cover;', esc_attr( $custom_slide_image_heights['tablet'] ) ),
								'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
							) );
						}
						if ( '' !== $custom_slide_image_heights['phone'] ) {
							self::set_style( $render_slug, array(
								'selector'    => '%%order_class%% .aioc_team_carousel_item img',
								'declaration' => sprintf( 'height: %1$s !important; object-fit: cover;', esc_attr( $custom_slide_image_heights['phone'] ) ),
								'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
							) );
						}
					}
				}
			}

			$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;',
				) );
			}
			
		} 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(),
		) );

		$args = array(
			'render_slug'	=> $render_slug,
			'props'			=> $this->props,
			'fields'		=> $this->fields_unprocessed,
			'module'		=> $this,
			'backgrounds' 	=> array(
				'content_bg' => array(
					'normal' => "{$this->main_css_element} .aioc_slide_inner_content_wrapper",
					'hover' => "{$this->main_css_element} .aioc_slide_inner_content_wrapper:hover",
	 			),
			),
		);
		AIOC_Helper::process_background( $args );

		$fields = array( 'slider_margin_padding' );
		AIOC_Helper::process_advanced_margin_padding_css( $this, $render_slug, $this->margin_padding, $fields );
		
		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_team_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';
		$enable_coverflow_shadow  = 'on' === $this->props['enable_coverflow_shadow'] ? 'true' : 'false';
		$coverflow_rotate 	   	  = intval( $this->props['coverflow_rotate'] );
		$coverflow_depth 	   	  = intval( $this->props['coverflow_depth'] );
		$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' ), true ) ? 'true' : 'false';
		$slide_center_mode		  = 'on' === $this->props['slide_center_mode'] ? 'true' : 'false';
		$slide_center_mode		  = 'slide' === $slide_effect ? $slide_center_mode : 'false';
		$dots 					  = 'false';
		$arrows 				  = 'false';
		$autoplaySlides			  = 0;
		$cube 					  = 'false';
		$coverflow 				  = 'false';		
		$slidesPerGroupSkip		  = 0;
		$slidesPerGroupSkipIpad	  = 0;
		$slidesPerGroupSkipMobile = 0;
		$slidesPerGroup 		  = 1;
		$slidesPerGroupIpad	      = 1;
		$slidesPerGroupMobile 	  = 1;

		if ( in_array( $slide_effect, array( 'slide', 'coverflow' ), 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,
			}';
		}
		if ( 'coverflow' === $slide_effect ) {
			$coverflow = '{
				rotate: ' . $coverflow_rotate . ',
				stretch: 0,
				depth: ' . $coverflow_depth . ',
				modifier: 1,
				slideShadows : ' . $enable_coverflow_shadow . ',
			}';
		}

		$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 . ',
			centeredSlides: '.$slide_center_mode.',
			spaceBetween: ' . intval( $cards_space_between ) . ',
			slidesPerGroup: ' . $slidesPerGroup . ',
			slidesPerGroupSkip: ' . $slidesPerGroupSkip . ',
			effect: "' . $slide_effect . '",
			cubeEffect: ' . $cube . ',
			coverflowEffect: ' . $coverflow . ',
			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 . ',
				}
			},
		} );';

		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_TeamCarousel;
