<?php
class AIOC_LogoCarousel extends ET_Builder_Module {

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

	public function get_settings_modal_toggles() {
		return array(
			'general'  => array(
				'toggles' => array(
					'display' => array(
						'title' => esc_html__( 'Display', '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',
							)
						),
						'tabbed_subtoggles' => true,
					),
				),
			),
			'advanced' => array(
				'toggles' => array(
					'logo_settings' => array(
						'title' => esc_html__( 'Logo', 'all-in-one-carousel-for-divi' ),
					),
					'text_settings' => array(
						'title' => esc_html__( 'Content', 'all-in-one-carousel-for-divi' ),
						'sub_toggles'   => array(
							'title' => array(
								'name' => esc_html__( 'Title', 'all-in-one-carousel-for-divi' ),
							),
							'content' => array(
								'name' => esc_html__( 'Content', 'all-in-one-carousel-for-divi' ),
							),
						),
						'tabbed_subtoggles' => true,
					),
					'slider_styles' => array(
						'title' => esc_html__( 'Slider', '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' => '16px',
						'range_settings'   => array(
							'min'  => '1',
							'max'  => '100',
							'step' => '1',
						),
						'validate_unit'    => true,
					),
					'text_align' => array(
						'default' => 'center',
					),
					'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' => '',
						'range_settings'   => array(
							'min'  => '0',
							'max'  => '10',
							'step' => '1',
						),
						'validate_unit'    => true,
					),
					'css'            => array(
						'main' => "{$this->main_css_element} .aioc_slide_title",
						'important' => 'all',
					),
					'tab_slug' => 'advanced',
					'toggle_slug' => 'text_settings',
					'sub_toggle' => 'title',
				),
				'content' => array(
					'label'          => esc_html__( 'Content', 'all-in-one-carousel-for-divi' ),
					'font_size'      => array(
						'default' => '14px',
						'range_settings'   => array(
							'min'  => '1',
							'max'  => '100',
							'step' => '1',
						),
						'validate_unit'    => true,
					),
					'text_align' => array(
						'default' => 'center',
					),
					'line_height'    => array(
						'default' => '1.5em',
						'range_settings'   => array(
							'min'  => '0.1',
							'max'  => '10',
							'step' => '0.1',
						),
					),
					'letter_spacing' => array(
						'default' => '',
						'range_settings'   => array(
							'min'  => '0',
							'max'  => '10',
							'step' => '1',
						),
						'validate_unit'    => true,
					),
					'css'            => array(
						'main' => "{$this->main_css_element} .aioc_slide_content",
						'important' => 'all',
					),
					'tab_slug' => 'advanced',
					'toggle_slug' => 'text_settings',
					'sub_toggle' => 'content',
				),
			),
			'borders' => array(
				'logo' => array(
					'label_prefix'    => esc_html__( 'Logo', 'all-in-one-carousel-for-divi' ),
					'css' => array(
						'main' => array(
							'border_radii'  => '%%order_class%% .aioc-logo-carousel-item .aioc-logo-image',
							'border_styles' => '%%order_class%% .aioc-logo-carousel-item .aioc-logo-image',
							'important' => 'all',
						),
					),
					'tab_slug' => 'advanced',
					'toggle_slug' => 'logo_settings',
				),
				'default' => array(
					'css' => array(
						'main' => array(
							'border_radii'  => '%%order_class%%',
							'border_styles' => '%%order_class%%',
						),
					),
				),
			),
			'slider_margin_padding' => array(
				'slider_container' => array(
					'margin_padding' => array(
						'css' => array(
							'use_margin' => false,
							'padding'   => "%%order_class%% .aioc-logo-carousel-layout > .swiper-container",
							'important' => 'all',
						),
					),
				),
				'logo' => array(
					'margin_padding' => array(
						'css' => array(
							'use_margin' => false,
							'padding'   => "%%order_class%% .aioc-logo-carousel-item .aioc-logo-image",
							'important' => 'all',
						),
					),
				),
				'logo_content' => array(
					'margin_padding' => array(
						'css' => array(
							'use_margin' => false,
							'padding'   => "%%order_class%% .aioc-logo-carousel-item .aioc-logo-carousel-content",
							'important' => 'all',
						),
					),
				),
				'arrows' => array(
					'margin_padding' => array(
						'css' => array(
							'use_margin' => false,
							'padding'    => "%%order_class%% .aioc-logo-carousel-layout > .aioc_swiper_navigation .swiper-button-next, %%order_class%% .aioc-logo-carousel-layout > .aioc_swiper_navigation .swiper-button-prev",
							'important'  => 'all',
						),
					),
				),
			),
			'margin_padding' => array(
				'css' => array(
					'main'      => '%%order_class%%',
					'important' => 'all',
				),
			),
			'box_shadow' => array(
				'logo' => array(
					'label'       => esc_html__( 'Logo Shadow', 'all-in-one-carousel-for-divi' ),
					'css'         => array(
						'main' => "%%order_class%% .aioc-logo-carousel-item .aioc-logo-image",
						'important' => 'all',
					),
					'tab_slug'    => 'advanced',
					'toggle_slug' => 'logo_settings',
				),
				'default' => array(
					'css' => array(
						'main' => '%%order_class%%',
						'important' => 'all',
					),
				),
			),
			'text'    => false,
		);
	}

	public function get_fields() {
		return array_merge(
			array(
				'show_title'	=> array(
					'label'           => esc_html__( 'Show Title', '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'     => 'display',
					'description'     => esc_html__( 'Here you can choose whether or not to display the title for the logo slider.', 'all-in-one-carousel-for-divi' ),
				),
				'show_content'	=> array(
					'label'           => esc_html__( 'Show Content', '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'     => 'display',
					'description'     => esc_html__( 'Here you can choose whether or not to display the content for the logo slider.', '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'         => 'general',
					'toggle_slug'      => 'display',
					'description'      => esc_html__( 'Enable this to disable lazy loading.', 'all-in-one-carousel-for-divi' ),
				),
				'slide_effect' => array(
					'label'           => esc_html__( 'Slide 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' ),
						'fade'      => esc_html__( 'Fade', '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' ),
				),
				'logos_per_slide' => array(
					'label'           => esc_html__( 'Logos 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' ),
					),
					'default'          => '4',
					'default_on_front' => '4',
					'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 products to display per slide.', 'all-in-one-carousel-for-divi' ),
				),
				'slides_per_group' => array(
					'label'           => esc_html__( 'Number of 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' ),
					),
					'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', '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' ),
				),
				'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'        => 'general',
					'toggle_slug'     => 'slider_settings',
					'sub_toggle'	  => 'general',
					'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'         => 'general',
					'toggle_slug'      => 'slider_settings',
					'sub_toggle'	   => 'general',
					'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',
					'tab_slug'         => 'general',
					'toggle_slug'      => 'slider_settings',
					'sub_toggle'	   => 'general',
					'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',
					'tab_slug'         => 'general',
					'toggle_slug'      => 'slider_settings',
					'sub_toggle'	   => 'general',
					'description'      => esc_html__( 'Coverflow Depth Slide.', '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' ),
				),
				'auto_height_slider' => array(
					'label'           => esc_html__( 'Auto Height Slider', 'all-in-one-carousel-for-divi' ),
					'type'            => 'yes_no_button',
					'option_category' => 'configuration',
					'options'         => array(
						'off' => esc_html__( 'Off', 'all-in-one-carousel-for-divi' ),
						'on'  => esc_html__( 'On', 'all-in-one-carousel-for-divi' ),
					),
					'default'         => 'off',
					'show_if'          => array(
						'equalize_slides_height' => 'off',
					),
					'tab_slug'        => 'general',
					'toggle_slug'     => 'slider_settings',
					'sub_toggle'	  => 'general',
					'description'     => esc_html__( 'Here you can choose whether or not slider height should adjust according to each slide.', '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'          => 'off',
					'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 the slider.', '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' ),
				),
				'slide_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' ),
				),
				'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'        => 'general',
					'toggle_slug'     => 'slider_settings',
					'sub_toggle'	  => 'navigation',
					'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'        => 'general',
					'toggle_slug'     => 'slider_settings',
					'sub_toggle'	  => 'navigation',
					'description'     => esc_html__( 'Here you can select the icon to be used for the next slide navigation.', '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' ),
						'bottom_right'  => esc_html__( 'Bottom Right', 'all-in-one-carousel-for-divi' ),
						'bottom_center' => esc_html__( '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' ),
				),
				'grayscale_effect'	=> array(
					'label'           => esc_html__( 'Grayscale Effect', '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'     => 'logo_settings',
					'description'     => esc_html__( 'Enable it to display all logos default to grayscale and on hover it will changed to default.', 'all-in-one-carousel-for-divi' ),
				),
				'logo_align' => array(
					'label'            => esc_html__( 'Logo Alignment', 'all-in-one-carousel-for-divi' ),
					'type'             => 'select',
					'option_category'  => 'basic_option',
					'options'          => array(
						'center'	=> esc_html__( 'Center', 'all-in-one-carousel-for-divi' ),
						'left'		=> esc_html__( 'Left', 'all-in-one-carousel-for-divi' ),
						'right'		=> esc_html__( 'Right', 'all-in-one-carousel-for-divi' ),
					),
					'default' 		   => 'center',
					'default_on_front' => 'center',
					'tab_slug'         => 'advanced',
					'toggle_slug'      => 'logo_settings',
					'description'      => esc_html__( 'Choose position of logo.', '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'      => 'slider_styles',
					'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' ),
				),
				'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',
					),
					'default'         => '24px',
					'tab_slug'        => 'advanced',
					'toggle_slug'     => 'slider_styles',
					'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',
					),
					'hover'        => 'tabs',
					'tab_slug'     => 'advanced',
					'toggle_slug'  => 'slider_styles',
					'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'  => 'slider_styles',
					'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_radius' => array(
					'label'           => esc_html__( 'Arrow Border Radius', 'all-in-one-carousel-for-divi' ),
					'type'            => 'range',
					'option_category' => 'layout',
					'range_settings'  => array(
						'min'  => '0',
						'max'  => '500',
						'step' => '1',
					),
					'show_if' 		  => array(
						'show_arrow' => 'on',
					),
					'default'         => '0px',
					'tab_slug'        => 'advanced',
					'toggle_slug'     => 'slider_styles',
					'description'     => esc_html__( 'Move the slider or input the value to increase or decrease the border radius of the arrow background.', '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'     => 'slider_styles',
					'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'  => 'slider_styles',
					'description'  => esc_html__( 'Here you can choose a custom color to be used for the arrow border', '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'  => 'slider_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'       => '#cccccc',
					'tab_slug'      => 'advanced',
					'toggle_slug'   => 'slider_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'  	=> 'slider_styles',
					'description'  	=> esc_html__( 'Here you can define color for the number of pagination item.', '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',
					'default'		   => '',
					'default_on_front' => '',
					'mobile_options'   => true,
					'hover'            => false,
					'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' ),
				),
				'logo_custom_padding' => array(
					'label'            => esc_html__( 'Logo Padding', 'all-in-one-carousel-for-divi' ),
					'type'             => 'custom_padding',
					'option_category'  => 'layout',
					'default'		   => '',
					'default_on_front' => '',
					'mobile_options'   => true,
					'hover'            => false,
					'tab_slug'         => 'advanced',
					'toggle_slug'      => 'logo_settings',
					'description'      => esc_html__( 'Padding adds extra space to the inside of the product item, increasing the distance between the edge of the element and its inner contents.', 'all-in-one-carousel-for-divi' ),
				),
				'logo_content_custom_padding' => array(
					'label'           => esc_html__( 'Logo Content Padding', 'all-in-one-carousel-for-divi' ),
					'type'            => 'custom_padding',
					'option_category' => 'layout',
					'default'		  => '10px|10px|10px|10px|true|true',
					'mobile_options'  => true,
					'hover'           => false,
					'tab_slug'        => 'advanced',
					'toggle_slug'     => 'logo_settings',
					'description'     => esc_html__( 'Padding adds extra space to the inside of the product item content, increasing the distance between the edge of the element and its inner contents.', 'all-in-one-carousel-for-divi' ),
				),
			)
		);
	}

	public function render( $attrs, $content, $render_slug ) {

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

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

			wp_enqueue_script( 'aioc-logo-carousel', ALL_IN_ONE_CAROUSEL_FOR_DIVI_PATH . "includes/modules/LogoCarousel/aioc-logo-carousel.min.js", array('jquery'), '1.0.0', true );
			
			// Basic carousel
			$carousel = sprintf(
				'<div class="swiper-container">
					<div class="swiper-wrapper">%1$s</div>
				</div><!-- swiper-container -->',
				et_core_intentionally_unescaped( $this->content, 'html' )
			);

			// Navigation controls
			$next_prev_nav = '';
			$show_arrow = $this->props['show_arrow'];
			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'] ) ) ) 
					: ''
				);

				$arrows_position	= et_pb_responsive_options()->get_property_values( $this->props, 'arrows_position' );
				$arrows_position	= array_filter( $arrows_position );
				if ( ! empty( $arrows_position ) ) {
					$arrows_position_data = '';
					foreach( $arrows_position as $device => $value ) {
						$arrows_position_data .= ' data-arrows_' . $device . '="' . $value . '"';
					}
				}

				$next_prev_nav = sprintf(
					'<div class="aioc_swiper_navigation" %3$s>%1$s %2$s</div>',
					$next, $prev,
					! empty( $arrows_position_data ) ? $arrows_position_data : ''
				);
			}

			// Dot controls
			$control_dot = '';
			$show_control_dot  = $this->props['show_control_dot'];
			$control_dot_style = $this->props['control_dot_style'];
			if ( 'on' === $show_control_dot ) {
				$control_dot = sprintf(
					'<div class="aioc_swiper_pagination"><div class="swiper-pagination %1$s"></div></div>',
					esc_attr( $control_dot_style )
				);
			}

			$equalize_slides_height = $this->props['equalize_slides_height'];

			// Add carousel to the output
			$output = sprintf(
				'<div class="aioc_swiper_wrapper">
					<div class="aioc-logo-carousel-layout aioc_swiper_inner_wrap %4$s">
						%1$s
						%2$s
					</div>
					%3$s
				</div>',
				et_core_intentionally_unescaped( $carousel, 'html' ),
				et_core_intentionally_unescaped( $next_prev_nav, 'html' ),
				et_core_intentionally_unescaped( $control_dot, 'html' ),
				( 'on' === $equalize_slides_height ) ? 'equal-slide-height' : ''
			);

			$output .= $this->aioc_render_logos_carousel_script();

			$file = et_is_builder_plugin_active() ? 'style-dbp' : 'style';
        	wp_enqueue_style( 'aioc-products-carousel-style', ALL_IN_ONE_CAROUSEL_FOR_DIVI_PATH . 'includes/modules/LogoCarousel/' . $file . '.min.css', array(), '1.0.0' );

			if ( 'on' === $show_arrow ) {

				// Arrows icons
				if ( '' !== $this->props['next_slide_arrow'] ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc-logo-carousel-layout > .aioc_swiper_navigation .swiper-button-next::after',
						'declaration' => 'display: flex; align-items: center; height: 100%; content: attr(data-next_slide_arrow);',
					) );
					if ( class_exists( 'ET_Builder_Module_Helper_Style_Processor' ) && method_exists( 'ET_Builder_Module_Helper_Style_Processor', 'process_extended_icon' ) ) {
						$this->generate_styles( array(
							'utility_arg'    => 'icon_font_family',
							'render_slug'    => $render_slug,
							'base_attr_name' => 'next_slide_arrow',
							'important'      => true,
							'selector'       => '%%order_class%% .aioc-logo-carousel-layout > .aioc_swiper_navigation .swiper-button-next::after',
							'processor'      => array( 'ET_Builder_Module_Helper_Style_Processor', 'process_extended_icon' ),
						) );
					}
				}
				if ( '' !== $this->props['previous_slide_arrow'] ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc-logo-carousel-layout > .aioc_swiper_navigation .swiper-button-prev::after',
						'declaration' => 'display: flex; align-items: center; height: 100%; content: attr(data-previous_slide_arrow);',
					) );
					if ( class_exists( 'ET_Builder_Module_Helper_Style_Processor' ) && method_exists( 'ET_Builder_Module_Helper_Style_Processor', 'process_extended_icon' ) ) {
						$this->generate_styles(
							array(
								'utility_arg'    => 'icon_font_family',
								'render_slug'    => $render_slug,
								'base_attr_name' => 'previous_slide_arrow',
								'important'      => true,
								'selector'       => '%%order_class%% .aioc-logo-carousel-layout > .aioc_swiper_navigation .swiper-button-prev::after',
								'processor'      => array( 'ET_Builder_Module_Helper_Style_Processor', 'process_extended_icon' ),
							)
						);
					}
				}

				// Font size for arrows
				$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, '!important;', 'range' );
				}
				$show_arrow_on_hover = $this->props['show_arrow_on_hover'];
				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;',
						)
					);
				}

				$arrow_color = $this->props['arrow_color'];
				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 ) ),
					) );
				}
				$arrow_color_hover = $this->get_hover_value( '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_background_color = $this->props['arrow_background_color'];
				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 ) ),
					) );
				}
				$arrow_background_color_hover = $this->get_hover_value( '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 ( '' !== $this->props['arrow_background_border_radius'] ) {
					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-radius: %1$s;', esc_attr( $this->props['arrow_background_border_radius'] ) ),
					) );
				}

				$arrow_background_border_size = $this->props['arrow_background_border_size'];
				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 ) ),
					) );
				}
				$arrow_background_border_color = $this->props['arrow_background_border_color'];
				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 ) ),
					) );
				}
			}
			if ( 'on' === $show_control_dot ) {
				$control_dot_inactive_color = $this->props['control_dot_inactive_color'];
				if ( $control_dot_inactive_color ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_pagination .swiper-pagination-bullet',
						'declaration' => sprintf( 'background: %1$s !important;', esc_attr( $control_dot_inactive_color ) ),
					) );
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_pagination .transparent_dot .swiper-pagination-bullet',
						'declaration' => sprintf( 'border-color: %1$s;', esc_attr( $control_dot_inactive_color ) ),
					) );
				}
				$control_dot_active_color = $this->props['control_dot_active_color'];
				if ( $control_dot_active_color ) {
					self::set_style( $render_slug, array(
							'selector'    => '%%order_class%% .aioc_swiper_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active',
							'declaration' => sprintf( 'background: %1$s !important;', esc_attr( $control_dot_active_color ) ),
						)
					);
				}
				$slide_transition_duration = $this->props['control_dot_active_color'];
				if ( 'stretched_dot' === $control_dot_style && $slide_transition_duration ) {
					self::set_style( $render_slug, array(
						'selector'    => '%%order_class%% .aioc_swiper_pagination .stretched_dot .swiper-pagination-bullet',
						'declaration' => sprintf( 'transition: all %1$sms ease;', intval( $slide_transition_duration ) ),
					) );
				}
				$number_dot_text_color = $this->props['number_dot_text_color'];
				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 ) ),
					) );
				}
			}
			$enable_coverflow_shadow = $this->props['enable_coverflow_shadow'];
			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;',
				) );
			}

			// Grayscale effect
			$grayscale_effect = ! empty( $this->props['grayscale_effect'] ) ? $this->props['grayscale_effect'] : 'off';
			if ( 'on' === $grayscale_effect ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc-logo-carousel-item .aioc-logo-image',
					'declaration' => 'filter: grayscale(1);',
				) );
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc-logo-carousel-item .aioc-logo-image:hover',
					'declaration' => 'filter: grayscale(0);',
				) );
			}

			$logo_align = ! empty( $this->props['logo_align'] ) ? $this->props['logo_align'] : 'center';
			if ( 'center' === $logo_align ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc-logo-carousel-item .aioc-logo-image',
					'declaration' => 'margin-left: auto; margin-right: auto;',
				) );
			} elseif ( 'right' === $logo_align ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc-logo-carousel-item .aioc-logo-image',
					'declaration' => 'margin-left: auto; margin-right: 0;',
				) );
			} elseif ( 'left' === $logo_align ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .aioc-logo-carousel-item .aioc-logo-image',
					'declaration' => 'margin-left: 0; margin-right: auto;',
				) );
			}

			$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;',
				) );
			}
			
			$fields = array( 'slider_margin_padding' );
			AIOC_Helper::process_advanced_margin_padding_css( $this, $render_slug, $this->margin_padding, $fields );

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

		return et_core_intentionally_unescaped( $output, 'html' );
	}

	public function before_render() {
		global $aioc_logo_carousel_args;

		$aioc_logo_carousel_args = array(
			'show_title'	   => $this->props['show_title'],
			'show_content'	   => $this->props['show_content'],
			'disable_lazyload' => $this->props['disable_lazyload'],
		);

		$is_responsive = et_pb_responsive_options()->is_responsive_enabled( $this->props, 'logos_per_slide' );
		if ( ! $is_responsive ) {
			$logos_per_slide = $this->props['logos_per_slide'];
			if ( 'slide' === $this->props['slide_effect'] ) {
				$logos_per_slide_tablet = $logos_per_slide < 3 ? $logos_per_slide : 2;
				$logos_per_slide_mobile = 1;
			} else if ( 'coverflow' === $this->props['slide_effect'] ) {
				$logos_per_slide_tablet = 3;
				$logos_per_slide_mobile = 1;
			}
			if ( isset( $logos_per_slide_tablet ) && '' !== $logos_per_slide_tablet ) {
				$this->props['logos_per_slide_tablet'] = $logos_per_slide_tablet;
			}
			if ( isset( $logos_per_slide_mobile ) && '' !== $logos_per_slide_mobile ) {
				$this->props['logos_per_slide_phone'] = $logos_per_slide_mobile;
			}
		}
	}

	/**
	 * This function dynamically creates script parameters according to the user settings
	 *
	 * @return string
	 * */
	public function aioc_render_logos_carousel_script() {

		// Get order class
		$order_class = $this->get_module_order_class( 'aioc_logo_carousel' );

		$logos_per_view        		= 1;
		$logos_per_view_ipad   		= 1;
		$logos_per_view_mobile 		= 1;

		$logos_space_between   		= 0;
		$logos_space_between_ipad	= 0;
		$logos_space_between_mobile	= 0;

		$slidesPerGroup 			= 1;
		$slidesPerGroupIpad			= 1;
		$slidesPerGroupMobile		= 1;
		
		$slidesPerGroupSkip			= 0;
		$slidesPerGroupSkipIpad		= 0;
		$slidesPerGroupSkipMobile	= 0;

		$slide_effect = esc_attr( $this->props['slide_effect'] );
		if ( in_array( $slide_effect, array( 'slide', 'coverflow' ), true ) ) {
			$logos_per_slide 			= et_pb_responsive_options()->get_property_values( $this->props, 'logos_per_slide', '', true );
			$logos_per_view				= $logos_per_slide['desktop'];
			$logos_per_view_ipad		= ('' !== $logos_per_slide['tablet']) ? $logos_per_slide['tablet'] : $this->props['logos_per_slide_tablet'];
			$logos_per_view_mobile		= ('' !== $logos_per_slide['phone']) ? $logos_per_slide['phone'] : $this->props['logos_per_slide_phone'];

			$space_between_slides		= et_pb_responsive_options()->get_property_values( $this->props, 'space_between_slides', '', true );
			$logos_space_between   		= $space_between_slides['desktop'];
			$logos_space_between_ipad  	= ('' !== $space_between_slides['tablet']) ? $space_between_slides['tablet'] : $logos_space_between;
			$logos_space_between_mobile = ('' !== $space_between_slides['phone']) ? $space_between_slides['phone'] : $logos_space_between_ipad;
			
			$slides_per_group		 	= et_pb_responsive_options()->get_property_values( $this->props, 'slides_per_group', '', true );
			$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 ( $logos_per_view > $slidesPerGroup && 1 !== $slidesPerGroup ) {
				$slidesPerGroupSkip = $logos_per_view - $slidesPerGroup;
			}
			if ( $logos_per_view_ipad > $slidesPerGroupIpad && 1 !== $slidesPerGroupIpad ) {
				$slidesPerGroupSkipIpad = $logos_per_view_ipad - $slidesPerGroupIpad;
			}
			if ( $logos_per_view_mobile > $slidesPerGroupMobile && 1 !== $slidesPerGroupMobile ) {
				$slidesPerGroupSkipMobile = $logos_per_view_mobile - $slidesPerGroupMobile;
			}
		}

		$arrows = 'false';
		if ( isset($this->props['show_arrow']) && 'on' === $this->props['show_arrow'] ) {
			$arrows = "{    
				nextEl: '." . esc_attr( $order_class ) . " .aioc-logo-carousel-layout > .aioc_swiper_navigation .swiper-button-next',
				prevEl: '." . esc_attr( $order_class ) . " .aioc-logo-carousel-layout > .aioc_swiper_navigation .swiper-button-prev',
			}";
		}
		$dots = 'false';
		if ( isset($this->props['show_control_dot']) && 'on' === $this->props['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>';
				}";
			}
			$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 = "{
				el: '." . esc_attr( $order_class ) . " .aioc-logo-carousel-layout + .aioc_swiper_pagination .swiper-pagination',
				dynamicBullets: " . $dynamic_bullets . ",
				clickable: true,
				renderBullet: " . $number_dot . ",
			}";
		}

		$autoplay		= esc_attr( $this->props['autoplay'] );
		$pause_on_hover	= esc_attr( $this->props['pause_on_hover'] );

		$autoplaySlides = 0;
		if ( 'on' === $autoplay ) {
			$autoplay_speed = ( isset( $this->props['autoplay_speed'] ) ) ? intval( $this->props['autoplay_speed'] ) : 3000;
			if ( 'on' === $pause_on_hover ) {
				$autoplaySlides = '{ delay:' . $autoplay_speed . ', disableOnInteraction: true }';
			} else {
				$autoplaySlides = '{ delay:' . $autoplay_speed . ', disableOnInteraction: false }';
			}
		}

		$cube = 'false';
		if ( 'cube' === $slide_effect ) {
			$cube = '{ shadow: false, slideShadows: false }';
		}
		$coverflow = 'false';
		if ( 'coverflow' === $slide_effect ) {
			$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'] );

			$coverflow = '{
				rotate: ' . $coverflow_rotate . ',
				stretch: 0,
				depth: ' . $coverflow_depth . ',
				modifier: 1,
				slideShadows : ' . $enable_coverflow_shadow . ',
			}';
		}
		$fade = 'false';
		if ( 'fade' === $slide_effect ) {
			$fade = '{ crossFade: true }';
		}

		$transition_duration = intval( $this->props['slide_transition_duration'] );
		$transition_duration = '' !== $transition_duration || 0 !== $transition_duration ? $transition_duration : 1000;

		$loop				 = ( $this->props['slider_loop'] && 'on' === esc_attr($this->props['slider_loop']) ) ? 'true' : 'false';
		$auto_height_slider  = ( $this->props['auto_height_slider'] && 'on' === esc_attr($this->props['auto_height_slider']) ) ? 'true' : 'false';

		$script  = '<script type="text/javascript">';
		$script .= 'jQuery( function($) {';
		$script .= 'var ' . esc_attr( $order_class ) . '_swiper = new Swiper( \'.' . esc_attr( $order_class ) . ' .aioc-logo-carousel-layout > .swiper-container\', {
				slidesPerView: ' . $logos_per_view . ',
				autoplay: ' . $autoplaySlides . ',
				spaceBetween: ' . intval( $logos_space_between ) . ',
				slidesPerGroup: ' . $slidesPerGroup . ',
				slidesPerGroupSkip: ' . $slidesPerGroupSkip . ',
				effect: "' . $slide_effect . '",
				cubeEffect: ' . $cube . ',
				coverflowEffect: ' . $coverflow . ',
				fadeEffect: ' . $fade . ',
				speed: ' . $transition_duration . ',
				loop: ' . $loop . ',
				autoHeight: ' . $auto_height_slider . ',
				pagination: ' . $dots . ',
				navigation: ' . $arrows . ',
				grabCursor: \'true\',
				observer: true,
				observeParents: true,
				breakpoints: {
					981: {
						slidesPerView: ' . $logos_per_view . ',
						spaceBetween: ' . intval( $logos_space_between ) . ',
						slidesPerGroup: ' . $slidesPerGroup . ',
						slidesPerGroupSkip: ' . $slidesPerGroupSkip . ',
					},
					768: {
						slidesPerView: ' . $logos_per_view_ipad . ',
						spaceBetween: ' . intval( $logos_space_between_ipad ) . ',
						slidesPerGroup: ' . $slidesPerGroupIpad . ',
						slidesPerGroupSkip: ' . $slidesPerGroupSkipIpad . ',
					},
					0: {
						slidesPerView: ' . $logos_per_view_mobile . ',
						spaceBetween: ' . intval( $logos_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_LogoCarousel;