<?php

class DPOCP_ImageCarousel extends ET_Builder_Module {

	public static $images_ids = array();
	public static $images_alts = array();
	public $slug = 'et_pb_dp_oc_custom';
	public $vb_support = 'on';
	protected $module_credits = array(
		'module_uri' => 'https://www.diviplugins.com/divi/owl-carousel-pro-plugin',
		'author'     => 'DiviPlugins',
		'author_uri' => 'https://www.diviplugins.com',
	);
	public $image_sizes;
	public $fields_defaults = array(
		'number_thumb_last_edited' => array(
			'on|desktop',
			'add_default_setting'
		),
		'number_thumb_tablet'      => array( '3', 'add_default_setting' ),
		'number_thumb_phone'       => array( '1', 'add_default_setting' ),
	);

	public static function add_child_data( $img_data, $parent_class ) {
		if ( $img_data['image_id'] !== 'No Image' ) {
			self::$images_ids[ $parent_class ][]  = $img_data['image_id'];
			self::$images_alts[ $parent_class ][] = $img_data['image_alt_text'];
			$img_id                               = count( self::$images_ids[ $parent_class ] ) - 1;

			return $img_id;
		} else {
			return '';
		}
	}

	public function init() {
		$this->name             = esc_html__( 'DP Owl Image Carousel', 'dpocp-dp-owl-carousel-pro' );
		$this->child_slug       = 'et_pb_dp_oc_custom_item';
		$this->child_item_text  = __( 'Image', 'dpocp-dp-owl-carousel-pro' );
		$this->main_css_element = '%%order_class%%';
		$this->image_sizes      = Dp_Owl_Carousel_Pro_Utils::get_custom_sizes();
	}

	public function get_settings_modal_toggles() {
		return array(
			'general'  => array(
				'toggles' => array(
					'elements' => esc_html__( 'Carousel Options', 'dpocp-dp-owl-carousel-pro' ),
				),
			),
			'advanced' => array(
				'toggles' => array(
					'image'         => array(
						'title' => esc_html__( 'Thumbnails', 'dpocp-dp-owl-carousel-pro' ),
					),
					'thumbnail_nav' => array(
						'title' => esc_html__( 'Thumbnails Navigation', 'dpocp-dp-owl-carousel-pro' ),
					),
					'onclick'       => array(
						'title' => esc_html__( 'Click Action', 'dpocp-dp-owl-carousel-pro' ),
					),
					'arrows'        => array(
						'title' => esc_html__( 'Arrow', 'dpocp-dp-owl-carousel-pro' ),
					),
					'controls'      => array(
						'title' => esc_html__( 'Controls', 'dpocp-dp-owl-carousel-pro' ),
					),
				),
			),
		);
	}

	public function get_advanced_fields_config() {
		return array(
			'fonts'                 => array(
				'image_title'   => array(
					'label'       => __( 'Image Title', 'dpocp-dp-owl-carousel-pro' ),
					'css'         => array(
						'main' => "{$this->main_css_element} .dp_oc_item .dp_oc_image_title",
					),
					"line_height" => array( "default" => "1.7em", ),
					"font_size"   => array( "default" => "14px", ),
				),
				'image_content' => array(
					'label'       => __( 'Image Content', 'dpocp-dp-owl-carousel-pro' ),
					'css'         => array(
						'main' => "{$this->main_css_element} .dp_oc_item .dp_oc_image_content",
					),
					"line_height" => array( "default" => "1.7em", ),
					"font_size"   => array( "default" => "14px", ),
				),
			),
			'custom_margin_padding' => array(),
			'max_width'             => array(),
			'border'                => array(),
			'filters'               => array(
				'css'                  => array(
					'main' => "%%order_class%%",
				),
				'child_filters_target' => array(
					'tab_slug'    => 'advanced',
					'toggle_slug' => 'image',
				),
			),
			'image'                 => array(
				'css' => array(
					'main'  => "%%order_class%% .dp_oc_image_thumb",
					'hover' => "%%order_class%% .dp_oc_image_thumb:hover",
				),
			),
		);
	}

	public function get_custom_css_fields_config() {
		return array(
			'ocp_item'               => array(
				'label'    => __( 'Carousel Items Container', 'dpocp-dp-owl-carousel-pro' ),
				'selector' => '.dp_oc_item',
			),
			'ocp_arrow_prev'         => array(
				'label'    => __( 'Previous Arrow', 'dpocp-dp-owl-carousel-pro' ),
				'selector' => '.owl-carousel .owl-nav .owl-prev::before',
			),
			'ocp_arrow_next'         => array(
				'label'    => __( 'Next Arrow', 'dpocp-dp-owl-carousel-pro' ),
				'selector' => '.owl-carousel .owl-nav .owl-next::before',
			),
			'ocp_control'            => array(
				'label'    => __( 'Controls', 'dpocp-dp-owl-carousel-pro' ),
				'selector' => '.owl-carousel .owl-dots .owl-dot',
			),
			'ocp_control_active'     => array(
				'label'    => __( 'Active Control', 'dpocp-dp-owl-carousel-pro' ),
				'selector' => '.owl-carousel .owl-dots .owl-dot.active',
			),
			'ocp_item_image'         => array(
				'label'    => __( 'Image', 'dpocp-dp-owl-carousel-pro' ),
				'selector' => 'img.dp_oc_image_thumb',
			),
			'ocp_item_image_title'   => array(
				'label'    => __( 'Image Title', 'dpocp-dp-owl-carousel-pro' ),
				'selector' => '.dp_oc_image_title',
			),
			'ocp_item_image_content' => array(
				'label'    => __( 'Image Content', 'dpocp-dp-owl-carousel-pro' ),
				'selector' => '.dp_oc_image_content',
			),
			'ocp_hash_container'     => array(
				'label'    => __( 'Navigation Thumbnail Container', 'dpocp-dp-owl-carousel-pro' ),
				'selector' => '.dp_ocp_hash_container',
			),
			'ocp_hash_image'         => array(
				'label'    => __( 'Navigation Thumbnail Images', 'dpocp-dp-owl-carousel-pro' ),
				'selector' => '.dp_ocp_hash_image',
			),
		);
	}

	public function get_fields() {
		$fields = array(
			/*
			 * Carousel
			 */
			'show_arrow'               => array(
				'label'           => __( 'Show Arrows', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'on',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
				'description'     => __( 'This setting allows you to turn the navigation arrows on or off. Arrows will only display if the number of available posts exceeds the number of thumbnails set to display per slide.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'items_per_slide'          => array(
				'label'           => __( 'Items Per Slide Action', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'text',
				'option_category' => 'configuration',
				'default'         => '1',
				'show_if'         => array( 'show_arrow' => 'on' ),
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
				'description'     => __( 'Number of posts to slide left or right when clicking the arrows.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'show_control'             => array(
				'label'           => __( 'Show Controls', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'on',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
				'description'     => __( 'Turn navigation controls on or off. Controls will only display if the number of available posts exceeds the number of thumbnails set to display.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'items_per_dot'            => array(
				'label'           => __( 'Items Per Control Action', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'text',
				'option_category' => 'configuration',
				'default'         => '3',
				'show_if'         => array( 'show_control' => 'on' ),
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
				'description'     => __( 'Number of posts to slide left or right when clicking the control dots. Disabled if Center option is turned on.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'use_hash_thumbnail'       => array(
				'label'           => __( 'Use Navigation Thumbnail Images', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'off',
				'show_if'         => array( 'show_control' => 'on' ),
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
				'description'     => __( 'Use navigation thumbnails images instead of controls.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'url_anchors'              => array(
				'label'           => __( 'URL Anchors', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'off',
				'show_if'         => array(
					'show_control'       => 'on',
					'use_hash_thumbnail' => 'on'
				),
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
				'description'     => __( 'Turn this option on if you want to link to a specific carousel image using an URL anchor.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'behavior'                 => array(
				'label'           => __( 'Carousel Behavior', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'select',
				'option_category' => 'configuration',
				'options'         => array(
					'loop'   => __( 'Loop', 'dpocp-dp-owl-carousel-pro' ),
					'rewind' => __( 'Rewind', 'dpocp-dp-owl-carousel-pro' ),
					'linear' => __( 'Linear', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'loop',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
				'description'     => __( 'Choose whether carousel should advance in an infinite loop, jump to first item when it reaches the end, or stop when it reaches the end.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'direction'                => array(
				'label'           => __( 'Carousel Direction', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'select',
				'option_category' => 'configuration',
				'options'         => array(
					'rtl' => __( 'Right to left', 'dpocp-dp-owl-carousel-pro' ),
					'ltr' => __( 'Left to right', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'rtl',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
				'description'     => __( 'Choose which direction the carousel should advance.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'center'                   => array(
				'label'           => __( 'Center', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'off',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
				'description'     => __( 'First carousel item will always start in the center of the carousel. This option must be turned on to center the clicked image in the carousel when using Navigation Thumbnails.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'auto_width'               => array(
				'label'           => __( 'Auto Width Images', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'off',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
				'description'     => __( 'Turn this option on if you want to display images in the size set in the Thumbnail Size option in the Design tab. Leave this option off if you want images to display evenly and adhere to Thumbnails Per Slide option in the Design tab.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'auto_height'              => array(
				'label'           => __( 'Auto Height Items', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'off',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
				'description'     => __( 'Height of carousel will change depending on shortest and tallest active items in the carousel.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'lazy_load'                => array(
				'label'           => __( 'Lazy Load', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'off',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
				'description'     => __( 'Turn this option on if you want images to load on demand. This option may not be compatible with some caching and optimizing plugins and should be turned off if you experience any display issues with the carousel.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'use_mousewheel'           => array(
				'label'           => __( 'Use Mousewheel', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'off',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
				'description'     => __( 'Activate carousel navigation using the mouse wheel.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'mousewheel_delay'         => array(
				'label'           => __( 'Mousewheel Delay', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'text',
				'option_category' => 'configuration',
				'default'         => '160',
				'show_if'         => array( 'use_mousewheel' => 'on' ),
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
			),
			'mouse_drag'               => array(
				'label'           => __( 'Mouse Drag', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'on',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
			),
			'touch_drag'               => array(
				'label'           => __( 'Touch Drag', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'on',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
			),
			'pull_drag'                => array(
				'label'           => __( 'Pull Drag', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'on',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'elements',
			),
			/*
			 * Arrows
			 */
			'arrow_color'              => array(
				'label'           => __( 'Arrows color', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'color-alpha',
				'option_category' => 'configuration',
				'custom_color'    => true,
				'show_if'         => array( 'show_arrow' => 'on' ),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'arrows',
			),
			'arrow_size'               => array(
				'label'           => __( 'Arrows size', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'select',
				'option_category' => 'configuration',
				'options'         => array(
					'2em' => __( 'Small', 'dpocp-dp-owl-carousel-pro' ),
					'4em' => __( 'Medium', 'dpocp-dp-owl-carousel-pro' ),
					'6em' => __( 'Large', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => '4em',
				'show_if'         => array( 'show_arrow' => 'on' ),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'arrows',
			),
			'prev_icon'                => array(
				'label'           => __( 'Previous Icon', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'select_icon',
				'option_category' => 'configuration',
				'show_if'         => array( 'show_arrow' => 'on' ),
				'class'           => array( 'et-pb-font-icon' ),
				'default'         => '%%19%%',
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'arrows',
			),
			'next_icon'                => array(
				'label'           => __( 'Next Icon', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'select_icon',
				'option_category' => 'configuration',
				'show_if'         => array( 'show_arrow' => 'on' ),
				'class'           => array( 'et-pb-font-icon' ),
				'default'         => '%%20%%',
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'arrows',
			),
			/*
			 * Controls
			 */
			'control_color'            => array(
				'label'           => __( 'Control color', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'color-alpha',
				'option_category' => 'configuration',
				'custom_color'    => true,
				'show_if'         => array( 'show_control' => 'on' ),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'controls',
			),
			'control_size'             => array(
				'label'           => __( 'Control size', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'select',
				'option_category' => 'configuration',
				'options'         => array(
					'8px'  => __( 'Small', 'dpocp-dp-owl-carousel-pro' ),
					'16px' => __( 'Medium', 'dpocp-dp-owl-carousel-pro' ),
					'24px' => __( 'Large', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => '16px',
				'show_if'         => array( 'show_control' => 'on' ),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'controls',
			),
			/*
			 * Click
			 */
			'all_lightbox'             => array(
				'label'           => __( 'Apply Lightbox to all Images', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'off',
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'onclick',
				'description'     => __( 'Turn this option on to apply the lightbox click action to all images in the carousel. Leave this option off to individually control which images are added to the lightbox.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'lightbox_elements'        => array(
				'label'           => __( 'Lightbox Data', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'multiple_checkboxes',
				'option_category' => 'configuration',
				'options'         => array(
					'i_text'    => __( 'Image Title Text', 'dpocp-dp-owl-carousel-pro' ),
					'i_title'   => __( 'Image Title', 'dpocp-dp-owl-carousel-pro' ),
					'i_content' => __( 'Image Content', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'on||',
				'show_if'         => array(
					'all_lightbox' => array( 'on' )
				),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'onclick',
				'description'     => __( 'Select data to show on the lightbox footer ', 'dpocp-dp-owl-carousel-pro' ),
			),
			'lightbox_gallery'         => array(
				'label'           => __( 'Use Lightbox Gallery', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'off',
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'onclick',
				'description'     => __( 'Turn this option on if you want the lightbox to display all images from the carousel in a gallery. Leave this option off if you only want the clicked image to display in the lightbox.', 'dpocp-dp-owl-carousel-pro' ),
			),
			/*
			 * Animation Fields
			 */
			'slide_auto'               => array(
				'label'           => __( 'Automatic Rotate', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( "No", 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'animation',
				'default'         => 'on',
				'description'     => __( 'If you would like the carousel to rotate automatically, without the visitor having to click the next button, enable this option and then adjust the rotation speed below if desired.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'c_s'                      => array(
				'label'           => __( 'Continuous Scroll', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( "No", 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'off',
				'show_if'         => array( 'slide_auto' => 'on' ),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'animation',
			),
			'slide_speed'              => array(
				'label'           => __( 'Automatic Rotate Speed (in ms)', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'text',
				'option_category' => 'configuration',
				'default'         => '5000',
				'show_if'         => array( 'slide_auto' => 'on' ),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'animation',
				'description'     => __( 'Here you can designate how fast the carousel rotates between each slide, if \'Automatic Rotate\' option is enabled above. The higher the number the longer the pause between each rotation.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'animation_speed'          => array(
				'label'           => __( 'Auto Rotate Animation Speed (in ms)', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'text',
				'option_category' => 'configuration',
				'default'         => '500',
				'show_if'         => array( 'slide_auto' => 'on', 'c_s' => 'off' ),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'animation',
				'description'     => __( 'Here you can designate how long it takes for the carousel to complete a rotation. The higher the number the slower the animation.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'arrows_speed'             => array(
				'label'           => __( 'Arrow Animation Speed (in ms)', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'text',
				'option_category' => 'configuration',
				'default'         => '500',
				'show_if'         => array( 'show_arrow' => 'on' ),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'animation',
				'description'     => __( 'Here you can designate how long it takes for the carousel to complete a rotation when the arrows are clicked. The higher the number the slower the animation.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'dots_speed'               => array(
				'label'           => __( 'Control Animation Speed (in ms)', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'text',
				'option_category' => 'configuration',
				'default'         => '500',
				'show_if'         => array( 'show_control' => 'on' ),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'animation',
				'description'     => __( 'Here you can designate how long it takes for the carousel to complete a rotation when the control dots are clicked. The higher the number the slower the animation.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'slide_hover'              => array(
				'label'           => __( 'Pause on Hover', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'yes_no_button',
				'option_category' => 'configuration',
				'options'         => array(
					'off' => __( "No", 'dpocp-dp-owl-carousel-pro' ),
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'off',
				'show_if'         => array( 'slide_auto' => 'on' ),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'animation',
				'description'     => __( 'Pause carousel rotation when user hovers over the slides', 'dpocp-dp-owl-carousel-pro' ),
			),
			/*
			 * Thumbnail Fields
			 */
			'hash_thumbnail_align'     => array(
				'label'           => __( 'Navigation Thumbnail Alignment', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'select',
				'option_category' => 'configuration',
				'options'         => array(
					'dpoc-align-center' => __( 'Center', 'dpocp-dp-owl-carousel-pro' ),
					'dpoc-align-right'  => __( 'Right', 'dpocp-dp-owl-carousel-pro' ),
					'dpoc-align-left'   => __( 'Left', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'dpoc-align-center',
				'show_if'         => array(
					'show_control'       => 'on',
					'use_hash_thumbnail' => 'on'
				),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'thumbnail_nav',
				'description'     => __( 'Navigation thumbnails image alignment.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'hash_thumbnail_size'      => array(
				'label'           => __( 'Navigation Thumbnail Size', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'select',
				'option_category' => 'configuration',
				'options'         => $this->image_sizes,
				'default'         => 'thumbnail',
				'show_if'         => array(
					'show_control'       => 'on',
					'use_hash_thumbnail' => 'on'
				),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'thumbnail_nav',
				'description'     => __( 'Navigation thumbnails image source size. You can further adjust the image size using CSS in the Navigation Thumbnail Image box in the Advanced tab.', 'dpocp-dp-owl-carousel-pro' ),
			),
			'thumbnail_size'           => array(
				'label'           => __( 'Thumbnail Size', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'select',
				'option_category' => 'configuration',
				'options'         => $this->image_sizes,
				'default'         => 'et-pb-portfolio-image',
				'description'     => __( 'Change image size. <b>This option is currently not rendering in the live preview. You’ll need to view your changes on the front end.</b>', 'dpocp-dp-owl-carousel-pro' ),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'image'
			),
			'number_thumb'             => array(
				'label'           => __( 'Thumbnails to Display', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'range',
				'mobile_options'  => true,
				'validate_unit'   => false,
				'default_unit'    => '',
				'option_category' => 'configuration',
				'range_settings'  => array(
					'min'  => '1',
					'max'  => '20',
					'step' => '1',
				),
				'default'         => '5',
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'image',
				'description'     => 'This setting determines how many carousel items will be initially displayed on the screen.'
			),
			'number_thumb_tablet'      => array(
				'type'        => 'skip',
				'tab_slug'    => 'advanced',
				'toggle_slug' => 'image'
			),
			'number_thumb_phone'       => array(
				'type'        => 'skip',
				'tab_slug'    => 'advanced',
				'toggle_slug' => 'image'
			),
			'number_thumb_last_edited' => array(
				'type'        => 'skip',
				'tab_slug'    => 'advanced',
				'toggle_slug' => 'image'
			),
			'cloned_off'               => array(
				'label'       => __( 'Disable Cloned Items', 'dpocp-dp-owl-carousel-pro' ),
				'type'        => 'yes_no_button',
				'options'     => array(
					'on'  => __( 'Yes', 'dpocp-dp-owl-carousel-pro' ),
					'off' => __( 'No', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'     => 'off',
				'description' => __( 'Turn this option on to disable cloning carousel items to fill the carousel when there are less original items than the value above.', 'dpocp-dp-owl-carousel-pro' ),
				'tab_slug'    => 'advanced',
				'toggle_slug' => 'image',
			),
			'item_align'               => array(
				'label'       => __( 'Item Alignment', 'dpocp-dp-owl-carousel-pro' ),
				'type'        => 'select',
				'options'     => array(
					'flex-end'   => __( 'Right', 'dpocp-dp-owl-carousel-pro' ),
					'center'     => __( 'Center', 'dpocp-dp-owl-carousel-pro' ),
					'flex-start' => __( 'Left', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'     => 'flex-start',
				'description' => __( 'Choose how the items should be aligned when there are not enough to fill the carousel.', 'dpocp-dp-owl-carousel-pro' ),
				'tab_slug'    => 'advanced',
				'toggle_slug' => 'image',
			),
			'item_margin'              => array(
				'label'           => __( 'Item Margin', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'text',
				'option_category' => 'configuration',
				'default'         => '8',
				'mobile_options'  => true,
				'description'     => __( 'Define the margin for each item at the carousel. Leave blank for default ( 8 ) ', 'dpocp-dp-owl-carousel-pro' ),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'image',
			),
			/*
			 * Background Fields
			 */
			'module_bg'                => array(
				'label'           => __( 'Items Background', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'color-alpha',
				'option_category' => 'layout',
				'custom_color'    => true,
				'tab_slug'        => 'general',
				'toggle_slug'     => 'background',
			),
			'background_layout'        => array(
				'label'           => __( 'Text Color', 'dpocp-dp-owl-carousel-pro' ),
				'type'            => 'select',
				'option_category' => 'color_option',
				'options'         => array(
					'light' => __( 'Dark', 'dpocp-dp-owl-carousel-pro' ),
					'dark'  => __( 'Light', 'dpocp-dp-owl-carousel-pro' ),
				),
				'default'         => 'light',
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'text',
				'description'     => __( 'Here you can choose whether your text should be light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark.', 'dpocp-dp-owl-carousel-pro' ),
			),
		);

		return $fields;
	}

	public function before_render() {
		global $dpocp_image_parent_module;
		Dp_Owl_Carousel_Pro_Utils::enqueue_script_and_styles( $this->props );
		$dpocp_image_parent_module                       = array();
		$dpocp_image_parent_module['thumbnail_size']     = $this->props['thumbnail_size'];
		$dpocp_image_parent_module['lazy_load']          = $this->props['lazy_load'];
		$dpocp_image_parent_module['auto_width']         = $this->props['auto_width'];
		$dpocp_image_parent_module['lightbox_gallery']   = $this->props['lightbox_gallery'];
		$dpocp_image_parent_module['all_lightbox']       = $this->props['all_lightbox'];
		$dpocp_image_parent_module['parent_class']       = ET_Builder_Element::add_module_order_class( $this->props['module_class'], $this->slug );
		$dpocp_image_parent_module['gallery_images']     = 0;
		$dpocp_image_parent_module['use_hash_thumbnail'] = $this->props['use_hash_thumbnail'];
		$dpocp_image_parent_module['url_anchors']        = $this->props['url_anchors'];
		$dpocp_image_parent_module['lightbox_elements']  = $this->props['lightbox_elements'];
	}

	public function render( $attrs, $content, $render_slug ) {
		$props           = $this->props;
		$props['the_ID'] = get_queried_object_id();
		/*
		 * Localize owl carousel initialization options from filter
		 */
		$module_order = trim( ET_Builder_Element::add_module_order_class( '', $render_slug ) );
		wp_localize_script( "dp-owl-carousel-pro-frontend-bundle", $module_order, array(
			'ocp_init' => apply_filters( 'dp_ocp_owl_init', array(), $props )
		) );
		/*
		 * Init values
		 */
		if ( $props['use_hash_thumbnail'] === 'on' ) {
			$props['show_control'] = 'off';
		}
		/*
		 * Add class names
		 */
		$module_class = ET_Builder_Element::add_module_order_class( $props['module_class'], $render_slug );
		$this->add_classname( array(
			$this->get_text_orientation_classname(),
			"et_pb_bg_layout_{$props['background_layout']}",
		) );
		if ( 'dark' === $props['background_layout'] ) {
			$this->add_classname( 'et_pb_text_color_light' );
		}
		/*
		 * Set styles
		 */
		// Images: Add CSS Filters and Mix Blend Mode rules (if set)
		if ( array_key_exists( 'image', $this->advanced_fields ) && array_key_exists( 'css', $this->advanced_fields['image'] ) ) {
			$this->add_classname(
				$this->generate_css_filters(
					$render_slug,
					'child_',
					self::$data_utils->array_get( $this->advanced_fields['image']['css'], 'main', '%%order_class%% .dp_oc_image_thumb' )
				)
			);
		}
		if ( '' !== $props['module_bg'] ) {
			ET_Builder_Element::set_style( $render_slug, array(
				'selector'    => '%%order_class%%.et_pb_dp_oc_custom .dp_oc_item',
				'declaration' => sprintf(
					'background-color: %1$s;', esc_html( $props['module_bg'] )
				),
			) );
		}
		if ( '' !== $props['arrow_color'] ) {
			ET_Builder_Element::set_style( $render_slug, array(
				'selector'    => '%%order_class%%.et_pb_dp_oc_custom .owl-carousel .owl-nav',
				'declaration' => sprintf(
					'color: %1$s;', esc_html( $props['arrow_color'] )
				),
			) );
		}
		if ( '' !== $props['control_color'] ) {
			ET_Builder_Element::set_style( $render_slug, array(
				'selector'    => '%%order_class%%.et_pb_dp_oc_custom .owl-carousel .owl-dots .owl-dot',
				'declaration' => sprintf(
					'background-color: %1$s;', esc_html( $props['control_color'] )
				),
			) );
		}
		if ( '' !== $props['control_size'] ) {
			ET_Builder_Element::set_style( $render_slug, array(
				'selector'    => '%%order_class%%.et_pb_dp_oc_custom .owl-carousel .owl-dots .owl-dot',
				'declaration' => sprintf(
					'width: %1$s; height: %1$s', esc_html( $props['control_size'] )
				),
			) );
		}
		if ( 'on' === $props['show_arrow'] ) {
			$previous_icon = str_replace( array(
				';',
				'&#x',
				'&amp#x'
			), '', et_pb_process_font_icon( $props['prev_icon'] ) );
			$next_icon     = str_replace( array(
				';',
				'&#x',
				'&amp#x'
			), '', et_pb_process_font_icon( $props['next_icon'] ) );
			ET_Builder_Element::set_style( $render_slug, array(
				'selector'    => '%%order_class%%.et_pb_dp_oc_custom .owl-carousel .owl-prev:before',
				'declaration' => sprintf( 'content: "\%1$s";', $previous_icon ),
			) );
			ET_Builder_Element::set_style( $render_slug, array(
				'selector'    => '%%order_class%%.et_pb_dp_oc_custom .owl-carousel .owl-next:before',
				'declaration' => sprintf( 'content: "\%1$s";', $next_icon ),
			) );
			if ( version_compare( ET_BUILDER_PRODUCT_VERSION, '4.12.1', '>' ) ) {
				$this->generate_styles(
					array(
						'utility_arg'    => 'icon_font_family',
						'render_slug'    => $render_slug,
						'base_attr_name' => 'prev_icon',
						'important'      => true,
						'selector'       => '%%order_class%%.et_pb_dp_oc_custom .owl-carousel .owl-prev:before',
						'processor'      => array(
							'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_icon',
						'important'      => true,
						'selector'       => '%%order_class%%.et_pb_dp_oc_custom .owl-carousel .owl-next:before',
						'processor'      => array(
							'ET_Builder_Module_Helper_Style_Processor',
							'process_extended_icon',
						),
					)
				);
			}
		}
		/*
		 *
		 */
		$items_margin = intval( $props['item_margin'] );
		if ( isset( $props['item_margin_tablet'] ) && '' != $props['item_margin_tablet'] ) {
			$items_margin .= '|' . intval( $props['item_margin_tablet'] );
		} else {
			$items_margin .= '|' . intval( $props['item_margin'] );
		}
		if ( isset( $props['item_margin_phone'] ) && '' != $props['item_margin_phone'] ) {
			$items_margin .= '|' . intval( $props['item_margin_phone'] );
		} else {
			$items_margin .= '|' . intval( $props['item_margin'] );
		}
		/*
		 * Init output
		 */
		ob_start();
		$items_count = isset( self::$images_ids[ $module_class ] ) && is_array( self::$images_ids[ $module_class ] ) ? count( self::$images_ids[ $module_class ] ) : 0;
		$content     = apply_filters( 'dp_ocp_items_carousel_content', $props['content'], $props );
		echo sprintf( '<div class="owl-carousel" data-rotate="%1$s" data-speed="%2$s" data-hover="%3$s" data-arrow="%4$s" data-control="%5$s" data-items="%6$s" data-items-tablet="%7$s" data-items-phone="%8$s" data-margin="%9$s" data-behaviour="%10$s" data-direction="%11$s" data-center="%12$s" data-items-per-dot="%13$s" data-items-per-slide="%14$s" data-arrow-size="%15$s" data-use-hash="%16$s" data-auto-width="%17$s" data-auto-height="%28$s" data-module="%18$s" data-animation-speed="%19$s" data-arrows-speed="%20$s" data-controls-speed="%21$s" data-lazy="%22$s" data-url-anchor="%23$s" data-mousewheel="%24$s" data-mousewheel-delay="%26$s" data-drag="%25$s" data-cloneoff="%29$s" data-cloneoffalign="%30$s" data-items-found="%31$s" data-cs="%32$s">%27$s</div>', $props['slide_auto'], $props['slide_speed'], $props['slide_hover'], $props['show_arrow'], $props['show_control'], $props['number_thumb'], $props['number_thumb_tablet'], $props['number_thumb_phone'], $items_margin, $props['behavior'], $props['direction'], $props['center'], $props['items_per_dot'], $props['items_per_slide'], $props['arrow_size'], $props['use_hash_thumbnail'], $props['auto_width'], $module_order, $props['animation_speed'], $props['arrows_speed'], $props['dots_speed'], $props['lazy_load'], $props['url_anchors'], $props['use_mousewheel'], $props['mouse_drag'] . "|" . $props['touch_drag'] . "|" . $props['pull_drag'], $props['mousewheel_delay'], $content, $props['auto_height'], $props['cloned_off'], $props['item_align'], $items_count, $props['c_s'] );
		$carousel_content = ob_get_clean();

		$thumbnails_images     = [];
		$thumbnails_images_alt = [];
		if ( $items_count ) {
			foreach ( self::$images_ids[ $module_class ] as $image_id ) {
				$thumbnails_images[] = wp_get_attachment_image_url( $image_id, $props['hash_thumbnail_size'] );
			}
			foreach ( self::$images_alts[ $module_class ] as $image_alt ) {
				$thumbnails_images_alt[] = $image_alt;
			}
		}
		$thumbnails_images     = apply_filters( 'dp_ocp_nav_thumbs', $thumbnails_images, $props );
		$thumbnails_images_alt = apply_filters( 'dp_ocp_nav_thumbs_alt', $thumbnails_images_alt, $props );
		$hash_output           = apply_filters( 'dp_ocp_nav_thumbs_content', Dp_Owl_Carousel_Pro_Utils::render_thumbnails( $thumbnails_images, $module_class, $props, $thumbnails_images_alt ), $props );

		return sprintf( '%1$s%2$s', $carousel_content, $hash_output );
	}

}

new DPOCP_ImageCarousel;

