<?php
/**
 * @author      Elicus <hello@elicus.com>
 * @link        https://www.elicus.com/
 * @copyright   2024 Elicus Technologies Private Limited
 * @version     1.4.1
 */
class EL_VideoGallery extends ET_Builder_Module {
	public $slug       = 'el_video_gallery';
	public $child_slug = 'el_video_gallery_item';
	public $vb_support = 'on';

	protected $module_credits = array(
		'module_uri' => 'https://diviextended.com/product/divi-gallery-extended/',
		'author'     => 'Elicus',
		'author_uri' => 'https://elicus.com/',
	);

	public function init() {
		$this->name = esc_html__( 'Video Gallery', 'divi-gallery-extended' );
		$this->child_item_text  = esc_html__( 'Video', 'divi-gallery-extended' );
		$this->main_css_element = '%%order_class%%';
	}

	public function get_settings_modal_toggles() {
		return array(
			'general'  => array(
				'toggles' => array(
					'display' => array(
						'title' => esc_html__( 'Display', 'divi-gallery-extended' ),
					),
				)
			),
			'advanced'   => array(
				'toggles' => array(
					'title_caption_container' => array(
						'title' => esc_html__( 'Title & Caption Container', 'divi-gallery-extended' ),
					),
					'gallery_text' => array(
						'title' => esc_html__( 'Text', 'divi-gallery-extended' ),
						'sub_toggles'   => array(
							'title_text'   => array( 'name' => esc_html__( 'Title', 'divi-gallery-extended' ) ),
							'caption_text' => array( 'name' => esc_html__( 'Caption', 'divi-gallery-extended' ) ),
						),
						'tabbed_subtoggles' => true,
					),
					'overlay' => array(
						'title' => esc_html__( 'Overlay', 'divi-gallery-extended' ),
					),
					'overlay_text' => array(
						'title' => esc_html__( 'Overlay Text', 'divi-gallery-extended' ),
						'sub_toggles'   => array(
							'title_text'   => array( 'name' => 'Title' ),
							'caption_text' => array( 'name' => 'Caption' ),
						),
						'tabbed_subtoggles' => true,
					),
					'lightbox' => array(
						'title' => esc_html__( 'Lightbox', 'divi-gallery-extended' ),
					),
					'lightbox_text' => array(
						'title' => esc_html__( 'Lightbox Text', 'divi-gallery-extended' ),
						'sub_toggles'   => array(
							'title_text'   => array( 'name' => 'Title' ),
							'caption_text' => array( 'name' => 'Caption' ),
						),
						'tabbed_subtoggles' => true,
					),
				)
			)
		);
	}

	public function get_advanced_fields_config() {
		return array(
			'fonts' => array(
				'title_text' => array(
					'label'             => esc_html__( 'Title', 'divi-gallery-extended' ),
					'font_size'         => array(
						'default'           => '16px',
						'range_settings'    => array(
							'min'   => '1',
							'max'   => '100',
							'step'  => '1',
						),
						'validate_unit'     => true,
					),
					'line_height'       => array(
						'default'           => '1.5em',
						'range_settings'    => array(
							'min'   => '0.1',
							'max'   => '10',
							'step'  => '0.1',
						),
					),
					'letter_spacing'    => array(
						'default'           => '0px',
						'range_settings'    => array(
							'min'   => '0',
							'max'   => '10',
							'step'  => '1',
						),
						'validate_unit' => true,
					),
					'text_color' => array(
						'default' => '#000',
					),
					'text_align'  => array(
						'default' => 'left',
					),
					'css'               => array(
						'main'      => "%%order_class%% .el-video-gallery-content .el-overlay-title",
					),
					'toggle_slug'       => 'gallery_text',
					'sub_toggle'        => 'title_text',
					'tab_slug'          => 'advanced',
					'depends_on'        => array( 'show_title' ),
					'depends_show_if'   => 'on',
				),
				'caption_text' => array(
					'label'             => esc_html__( 'Caption', 'divi-gallery-extended' ),
					'font_size'         => array(
						'default'           => '16px',
						'range_settings'    => array(
							'min'   => '1',
							'max'   => '100',
							'step'  => '1',
						),
						'validate_unit'     => true,
					),
					'line_height'       => array(
						'default'           => '1.5em',
						'range_settings'    => array(
							'min'   => '0.1',
							'max'   => '10',
							'step'  => '0.1',
						),
					),
					'letter_spacing'    => array(
						'default'           => '0px',
						'range_settings'    => array(
							'min'   => '0',
							'max'   => '10',
							'step'  => '1',
						),
						'validate_unit' => true,
					),
					'text_color' => array(
						'default' => '#000',
					),
					'text_align' => array(
						'default' => 'left',
					),
					'css'               => array(
						'main'      => "%%order_class%% .el-video-gallery-content .el-overlay-caption",
					),
					'toggle_slug'       => 'gallery_text',
					'sub_toggle'        => 'caption_text',
					'tab_slug'          => 'advanced',
					'depends_on'        => array( 'show_caption' ),
					'depends_show_if'   => 'on',
				),
				'overlay_title_text' => array(
					'label'             => esc_html__( 'Overlay Title', 'divi-gallery-extended' ),
					'font_size'         => array(
						'default'           => '16px',
						'range_settings'    => array(
							'min'   => '1',
							'max'   => '100',
							'step'  => '1',
						),
						'validate_unit'     => true,
					),
					'line_height'       => array(
						'default'           => '1.5em',
						'range_settings'    => array(
							'min'   => '0.1',
							'max'   => '10',
							'step'  => '0.1',
						),
					),
					'letter_spacing'    => array(
						'default'           => '0px',
						'range_settings'    => array(
							'min'   => '0',
							'max'   => '10',
							'step'  => '1',
						),
						'validate_unit' => true,
					),
					'text_color' => array(
						'default' => '#000',
					),
					'css'               => array(
						'main'      => "%%order_class%% .el-video-gallery-item-overlay .el-overlay-title",
					),
					'toggle_slug'       => 'overlay_text',
					'sub_toggle'        => 'title_text',
					'tab_slug'          => 'advanced',
					'depends_on'        => array( 'enable_overlay' ),
					'depends_show_if'   => 'on',
				),
				'overlay_caption_text' => array(
					'label'             => esc_html__( 'Overlay Caption', 'divi-gallery-extended' ),
					'font_size'         => array(
						'default'           => '16px',
						'range_settings'    => array(
							'min'   => '1',
							'max'   => '100',
							'step'  => '1',
						),
						'validate_unit'     => true,
					),
					'line_height'       => array(
						'default'           => '1.5em',
						'range_settings'    => array(
							'min'   => '0.1',
							'max'   => '10',
							'step'  => '0.1',
						),
					),
					'letter_spacing'    => array(
						'default'           => '0px',
						'range_settings'    => array(
							'min'   => '0',
							'max'   => '10',
							'step'  => '1',
						),
						'validate_unit' => true,
					),
					'text_color' => array(
						'default' => '#000',
					),
					'css'               => array(
						'main'      => "%%order_class%% .el-video-overlay-content .el-overlay-caption",
					),
					'toggle_slug'       => 'overlay_text',
					'sub_toggle'        => 'caption_text',
					'tab_slug'          => 'advanced',
					'depends_on'        => array( 'enable_overlay' ),
					'depends_show_if'   => 'on',
				),
				'lightbox_title_text' => array(
					'label'             => esc_html__( 'Lightbox Title', 'divi-gallery-extended' ),
					'font_size'         => array(
						'default'           => '16px',
						'range_settings'    => array(
							'min'   => '1',
							'max'   => '100',
							'step'  => '1',
						),
						'validate_unit'     => true,
					),
					'line_height'       => array(
						'default'           => '1.5em',
						'range_settings'    => array(
							'min'   => '0.1',
							'max'   => '10',
							'step'  => '0.1',
						),
					),
					'letter_spacing'    => array(
						'default'           => '0px',
						'range_settings'    => array(
							'min'   => '0',
							'max'   => '10',
							'step'  => '1',
						),
						'validate_unit' => true,
					),
					'text_color' => array(
						'default' => '#fff',
					),
					'hide_text_align'   => true,
					'css'               => array(
						'main'      => "%%order_class%%_lightbox .mfp-title .el-overlay-title",
					),
					'toggle_slug'       => 'lightbox_text',
					'sub_toggle'        => 'title_text',
					'tab_slug'          => 'advanced',
					'depends_on'        => array( 'click_trigger' ),
					'depends_show_if'   => 'lightbox',
				),
				'lightbox_caption_text' => array(
					'label'             => esc_html__( 'Lightbox Caption', 'divi-gallery-extended' ),
					'font_size'         => array(
						'default'           => '16px',
						'range_settings'    => array(
							'min'   => '1',
							'max'   => '100',
							'step'  => '1',
						),
						'validate_unit'     => true,
					),
					'line_height'       => array(
						'default'           => '1.5em',
						'range_settings'    => array(
							'min'   => '0.1',
							'max'   => '10',
							'step'  => '0.1',
						),
					),
					'letter_spacing'    => array(
						'default'           => '0px',
						'range_settings'    => array(
							'min'   => '0',
							'max'   => '10',
							'step'  => '1',
						),
						'validate_unit' => true,
					),
					'text_color' => array(
						'default' => '#fff',
					),
					'hide_text_align'   => true,
					'css'               => array(
						'main'      => "%%order_class%%_lightbox .mfp-title .el-overlay-caption",
					),
					'toggle_slug'       => 'lightbox_text',
					'sub_toggle'        => 'caption_text',
					'tab_slug'          => 'advanced',
					'depends_on'        => array( 'click_trigger' ),
					'depends_show_if'   => 'lightbox',
				),
			),
			'gallery_item_margin_padding' => array(
				'title_caption_container' => array(
					'margin_padding' => array(
						'css' => array(
							'use_margin' => false,
							'padding'    => '%%order_class%% .el_video_gallery_item .el-video-gallery-content',
							'important'  => 'all',
						),
					),
				)
			),
			'margin_padding' => array(
				'css' => array(
					'main'      => '%%order_class%%',
					'important' => 'all',
				),
			),
			'text' => false,
			'filters' => false,
		);
	}

	public function get_fields() {
		return array(
			'video_size' => array(
				'label'             => esc_html__( 'Video Size', 'divi-gallery-extended' ),
				'type'              => 'select',
				'option_category'   => 'configuration',
				'options'           => array(
					'ratio-16-9'    => esc_html__( '16:9 Ratio', 'divi-gallery-extended' ),
					'auto'          => esc_html__( 'Auto', 'divi-gallery-extended' ),
				),
				'default'           => 'ratio-16-9',
				'default_on_front'  => 'ratio-16-9',
				'mobile_options'    => true,
				'tab_slug'          => 'general',
				'toggle_slug'       => 'display',
				'description'       => esc_html__( 'Here you can select the number of columns to display vides.', 'divi-gallery-extended' ),
			),
			'no_of_columns' => array(
				'label'             => esc_html__( 'Number Of Columns', 'divi-gallery-extended' ),
				'type'              => 'select',
				'option_category'   => 'configuration',
				'options'           => array(
					'1' => esc_html( '1' ),
					'2' => esc_html( '2' ),
					'3' => esc_html( '3' ),
					'4' => esc_html( '4' ),
					'5' => esc_html( '5' ),
					'6' => esc_html( '6' ),
				),
				'default'           => '3',
				'default_on_front'  => '3',
				'mobile_options'    => true,
				'tab_slug'          => 'general',
				'toggle_slug'       => 'display',
				'description'       => esc_html__( 'Here you can select the number of columns to display vides.', 'divi-gallery-extended' ),
			),
			'column_spacing' => array(
				'label'             => esc_html__( 'Column Spacing', 'divi-gallery-extended' ),
				'type'              => 'range',
				'option_category'  	=> 'layout',
				'range_settings'    => array(
					'min'   => '0',
					'max'   => '100',
					'step'  => '1',
				),
				'fixed_unit'		=> 'px',
				'fixed_range'       => true,
				'validate_unit'		=> true,
				'mobile_options'    => true,
				'default'           => '15px',
				'default_on_front'  => '15px',
				'tab_slug'        	=> 'general',
				'toggle_slug'     	=> 'display',
				'description'       => esc_html__( 'Increase or decrease spacing between columns.', 'divi-gallery-extended' ),
			),
			'click_trigger' => array(
				'label'             => esc_html__( 'Click Trigger', 'divi-gallery-extended' ),
				'type'              => 'select',
				'option_category'   => 'configuration',
				'options'           => array(
					'lightbox'	=> esc_html__( 'Lightbox', 'divi-gallery-extended' ),
					'inline'	=> esc_html__( 'Inline Play', 'divi-gallery-extended' ),
				),
				'default' 			=> 'lightbox',
				'default_on_front' 	=> 'lightbox',
				'tab_slug'          => 'general',
				'toggle_slug'      	=> 'display',
				'description'      	=> esc_html__( 'Choose an action to perform on clicking of an image.', 'divi-gallery-extended' ),
			),
			'autoplay_video' => array(
				'label'            => esc_html__( 'Autoplay Video', 'divi-gallery-extended' ),
				'type'             => 'yes_no_button',
				'option_category'  => 'configuration',
				'options'          => array(
					'on'  => esc_html__( 'Yes', 'divi-gallery-extended' ),
					'off' => esc_html__( 'No', 'divi-gallery-extended' ),
				),
				'default' 			=> 'on',
				'default_on_front' 	=> 'on',
				'show_if'         => array(
					'click_trigger' => 'lightbox',
				),
				'tab_slug'          => 'general',
				'toggle_slug'      	=> 'display',
				'description'      	=> esc_html__( 'Whether to autoplay video in a lightbox or not.', 'divi-gallery-extended' ),
			),
			'enable_overlay' => array(
				'label'            => esc_html__( 'Enable Image Overlay', 'divi-gallery-extended' ),
				'type'             => 'yes_no_button',
				'option_category'  => 'configuration',
				'options'          => array(
					'on'  => esc_html__( 'Yes', 'divi-gallery-extended' ),
					'off' => esc_html__( 'No', 'divi-gallery-extended' ),
				),
				'default' 			=> 'on',
				'default_on_front' 	=> 'on',
				'tab_slug'          => 'general',
				'toggle_slug'      	=> 'display',
				'description'      	=> esc_html__( 'Whether or not to show overlay on images.', 'divi-gallery-extended' ),
			),
			'overlay_on_hover' => array(
				'label'            => esc_html__( 'Show Image Overlay on Hover', 'divi-gallery-extended' ),
				'type'             => 'yes_no_button',
				'option_category'  => 'configuration',
				'options'          => array(
					'on'  => esc_html__( 'Yes', 'divi-gallery-extended' ),
					'off' => esc_html__( 'No', 'divi-gallery-extended' ),
				),
				'default' 			=> 'on',
				'default_on_front' 	=> 'on',
				'show_if'         => array(
					'enable_overlay' => 'on',
				),
				'tab_slug'          => 'general',
				'toggle_slug'      	=> 'display',
				'description'      	=> esc_html__( 'Show images overlay on mouse over, else it will display as default.', 'divi-gallery-extended' ),
			),
			'overlay_icon' => array(
				'label'           => esc_html__( 'Overlay Icon', 'divi-gallery-extended' ),
				'type'            => 'select_icon',
				'option_category' => 'configuration',
				'class'           => array( 'et-pb-font-icon' ),
				'show_if'         => array(
					'enable_overlay' => 'on',
				),
				'default' 			=> '&#xf04b;||fa||900',
				'default_on_front' 	=> '&#xf04b;||fa||900',
				'tab_slug'        => 'general',
				'toggle_slug'     => 'display',
				'description'     => esc_html__( 'Here you can define a custom icon for the overlay', 'divi-gallery-extended' ),
			),
			'show_title' => array(
				'label'            => esc_html__( 'Show Title', 'divi-gallery-extended' ),
				'type'             => 'yes_no_button',
				'option_category'  => 'configuration',
				'options'          => array(
					'on'  => esc_html__( 'Yes', 'divi-gallery-extended' ),
					'off' => esc_html__( 'No', 'divi-gallery-extended' ),
				),
				'default' 			=> 'off',
				'default_on_front' 	=> 'off',
				'tab_slug'          => 'general',
				'toggle_slug'      	=> 'display',
				'description'      	=> esc_html__( 'Whether or not to show the title for images (if available).', 'divi-gallery-extended' ),
			),
			'title_area' => array(
				'label'             => esc_html__( 'Show Title in', 'divi-gallery-extended' ),
				'type'              => 'select',
				'option_category'   => 'configuration',
				'options'           => array(
					'lightbox'	=> esc_html__( 'Lightbox Only', 'divi-gallery-extended' ),
					'gallery' 	=> esc_html__( 'Gallery Only', 'divi-gallery-extended' ),
					'overlay' 	=> esc_html__( 'Overlay Only', 'divi-gallery-extended' ),
					'both'		=> esc_html__( 'Both Gallery and Lightbox', 'divi-gallery-extended' ),
				),
				'default'           => 'lightbox',
				'default_on_front'  => 'lightbox',
				'show_if'         	=> array(
					'show_title' => 'on',
				),
				'tab_slug'          => 'general',
				'toggle_slug'       => 'display',
				'description'       => esc_html__( 'Here you can select the area where you want to display title.', 'divi-gallery-extended' ),
			),
			'show_caption' => array(
				'label'            => esc_html__( 'Show Caption', 'divi-gallery-extended' ),
				'type'             => 'yes_no_button',
				'option_category'  => 'configuration',
				'options'          => array(
					'on'  => esc_html__( 'Yes', 'divi-gallery-extended' ),
					'off' => esc_html__( 'No', 'divi-gallery-extended' ),
				),
				'default' 			=> 'off',
				'default_on_front' 	=> 'off',
				'tab_slug'          => 'general',
				'toggle_slug'      	=> 'display',
				'description'      	=> esc_html__( 'Whether or not to show the caption for images (if available).', 'divi-gallery-extended' ),
			),
			'caption_area' => array(
				'label'             => esc_html__( 'Show Caption in', 'divi-gallery-extended' ),
				'type'              => 'select',
				'option_category'   => 'configuration',
				'options'           => array(
					'lightbox'	=> esc_html__( 'Lightbox Only', 'divi-gallery-extended' ),
					'gallery' 	=> esc_html__( 'Gallery Only', 'divi-gallery-extended' ),
					'overlay' 	=> esc_html__( 'Overlay Only', 'divi-gallery-extended' ),
					'both'		=> esc_html__( 'Both Gallery and Lightbox', 'divi-gallery-extended' ),
				),
				'default'           => 'lightbox',
				'default_on_front'  => 'lightbox',
				'show_if'         	=> array(
					'show_caption' => 'on',
				),
				'tab_slug'          => 'general',
				'toggle_slug'       => 'display',
				'description'       => esc_html__( 'Here you can select the area where you want to display title.', 'divi-gallery-extended' ),
			),
			'enable_masonry' => array(
				'label'            => esc_html__( 'Enable Masonry', 'divi-gallery-extended' ),
				'type'             => 'yes_no_button',
				'option_category'  => 'configuration',
				'options'          => array(
					'on'  => esc_html__( 'Yes', 'divi-gallery-extended' ),
					'off' => esc_html__( 'No', 'divi-gallery-extended' ),
				),
				'default' 			=> 'off',
				'default_on_front' 	=> 'off',
				'show_if'	=> array(
					'video_size' => array( 'auto' )
				),
				'tab_slug'          => 'general',
				'toggle_slug'      	=> 'display',
				'description'      	=> esc_html__( 'Whether or not to enable masonry layout.', 'divi-gallery-extended' ),
			),
			'overlay_icon_size' => array(
				'label'             => esc_html__( 'Overlay Icon Size', 'divi-gallery-extended' ),
				'type'              => 'range',
				'option_category'  	=> 'layout',
				'range_settings'    => array(
					'min'   => '0',
					'max'   => '100',
					'step'  => '1',
				),
				'fixed_unit'		=> 'px',
				'fixed_range'       => true,
				'validate_unit'		=> true,
				'mobile_options'    => true,
				'default'           => '28px',
				'default_on_front'  => '28px',
				'show_if'         	=> array(
					'enable_overlay' => 'on',
				),
				'tab_slug'        	=> 'advanced',
				'toggle_slug'     	=> 'overlay',
				'description'       => esc_html__( 'Increase or decrease icon font size.', 'divi-gallery-extended' ),
			),
			'overlay_icon_color' => array(
				'label'           => esc_html__( 'Overlay Icon Color', 'divi-gallery-extended' ),
				'type'            => 'color-alpha',
				'custom_color'    => true,
				'show_if'         => array(
					'enable_overlay' => 'on',
				),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'overlay',
				'description'     => esc_html__( 'Here you can define a custom color for the icon.', 'divi-gallery-extended' ),
			),
			'overlay_color' => array(
				'label'           => esc_html__( 'Overlay Background Color', 'divi-gallery-extended' ),
				'type'            => 'color-alpha',
				'custom_color'    => true,
				'show_if'         => array(
					'enable_overlay' => 'on',
				),
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'overlay',
				'description'     => esc_html__( 'Here you can define a custom color for the overlay', 'divi-gallery-extended' ),
			),
			'meta_background_color' => array(
				'label'           	=> esc_html__( 'Title & Caption Background Color', 'divi-gallery-extended' ),
				'type'            	=> 'color-alpha',
				'custom_color'    	=> true,
				'default'		  	=> 'rgba(0,0,0,0.6)',
				'default_on_front'	=> 'rgba(0,0,0,0.6)',
				'show_if'         	=> array(
					'click_trigger' => 'lightbox',
				),
				'tab_slug'        	=> 'advanced',
				'toggle_slug'     	=> 'lightbox',
				'description'     	=> esc_html__( 'Here you can define a custom overlay color for the title and caption.', 'divi-gallery-extended' ),
			),
			'lightbox_background_color' => array(
				'label'           	=> esc_html__( 'Lightbox Background Color', 'divi-gallery-extended' ),
				'type'            	=> 'color-alpha',
				'custom_color'    	=> true,
				'default'		  	=> 'rgba(0,0,0,0.8)',
				'default_on_front'	=> 'rgba(0,0,0,0.8)',
				'show_if'         	=> array(
					'click_trigger' => 'lightbox',
				),
				'tab_slug'        	=> 'advanced',
				'toggle_slug'     	=> 'lightbox',
				'description'     	=> esc_html__( 'Here you can define a custom background color for the lightbox.', 'divi-gallery-extended' ),
			),
			'lightbox_close_icon_color' => array(
				'label'           	=> esc_html__( 'Close Icon Color', 'divi-gallery-extended' ),
				'type'            	=> 'color-alpha',
				'custom_color'    	=> true,
				'default'		  	=> '#fff',
				'default_on_front'	=> '#fff',
				'show_if'         	=> array(
					'click_trigger' => 'lightbox',
				),
				'tab_slug'        	=> 'advanced',
				'toggle_slug'     	=> 'lightbox',
				'description'     	=> esc_html__( 'Here you can define a custom color for the close icon.', 'divi-gallery-extended' ),
			),
			'lightbox_arrows_color' => array(
				'label'           	=> esc_html__( 'Arrows Color', 'divi-gallery-extended' ),
				'type'            	=> 'color-alpha',
				'custom_color'    	=> true,
				'default'		  	=> '#fff',
				'default_on_front'	=> '#fff',
				'show_if'         	=> array(
					'click_trigger' => 'lightbox',
				),
				'tab_slug'        	=> 'advanced',
				'toggle_slug'     	=> 'lightbox',
				'description'     	=> esc_html__( 'Here you can define a custom color for the arrows.', 'divi-gallery-extended' ),
			),
			'title_caption_container_custom_padding' => array(
				'label'           => esc_html__( 'Title & Caption Container Padding', 'divi-ajax-search' ),
				'type'            => 'custom_padding',
				'option_category' => 'layout',
				'mobile_options'  => true,
				'hover'           => false,
				'default'		  => '||||true|true',
				'tab_slug'        => 'advanced',
				'toggle_slug'     => 'title_caption_container',
				'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.', 'divi-ajax-search' ),
			),
			'title_caption_container_bg' => array(
				'label'        => esc_html__( 'Title & Caption Container Background', 'divi-gallery-extended' ),
				'type'         => 'color-alpha',
				'custom_color' => true,
				'hover'		   => 'tabs',
				'tab_slug'     => 'advanced',
				'toggle_slug'  => 'title_caption_container',
				'description'  => esc_html__( 'Here you can define a custom color for the active pagination link.', 'divi-gallery-extended' ),
			),
		);
	}

	public function before_render() {
		global $dge_video_gallery_props;

		$dge_video_gallery_props['video_size']     = isset( $this->props['video_size'] ) ? $this->props['video_size'] : 'ratio-16-9';
		$dge_video_gallery_props['show_title']     = isset( $this->props['show_title'] ) ? $this->props['show_title'] : 'off';
		$dge_video_gallery_props['title_area']     = isset( $this->props['title_area'] ) ? $this->props['title_area'] : 'lightbox';
		$dge_video_gallery_props['show_caption']   = isset( $this->props['show_caption'] ) ? $this->props['show_caption'] : 'off';
		$dge_video_gallery_props['caption_area']   = isset( $this->props['caption_area'] ) ? $this->props['caption_area'] : 'lightbox';
		$dge_video_gallery_props['click_trigger']  = isset( $this->props['click_trigger'] ) ? $this->props['click_trigger'] : 'lightbox';
		$dge_video_gallery_props['enable_overlay'] = isset( $this->props['enable_overlay'] ) ? $this->props['enable_overlay'] : 'on';
	}

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

		// If no content.
		if ( ! $this->content || '' === $this->content ) {
			return sprintf(
				'<div class="entry">
					<h1>%1$s</h1>
					<p>%2$s</p>
				</div>',
				esc_html__( 'No Result Found!', 'divi-gallery-extended' ),
				esc_html__( 'There are no video found. Please add some videos to the gallery.', 'divi-gallery-extended' )
			);
		}

		// Get the props.
		$click_trigger  = ! empty( $this->props['click_trigger'] ) ? $this->props['click_trigger'] : 'lightbox';
		$enable_masonry = ! empty( $this->props['enable_masonry'] ) ? $this->props['enable_masonry'] : 'off';

		$masonry_gutter = '';
		if ( 'on' === $enable_masonry ) {
			$masonry_gutter = '<div class="el_video_gallery_item_gutter"></div>';
			wp_enqueue_script( 'elicus-isotope-script' );
			wp_enqueue_script( 'elicus-images-loaded-script' );
		}

		if ( 'lightbox' === $click_trigger ) {
			wp_enqueue_script( 'magnific-popup' );
			wp_enqueue_style( 'magnific-popup' );
		}

		wp_enqueue_style( 'dge-video-gallery-style', ELICUS_DIVI_GALLERY_EXTENDED_PATH . 'includes/modules/VideoGallery/style.css', array(), '1.0.0' );

		// Get the video size.
		$video_size     = ! empty( $this->props['video_size'] ) ? $this->props['video_size'] : 'ratio-16-9';

		// Wrapper class.
		$wrapper_class   = array( 'el-video-gallery-wrap' );
		$wrapper_class[] = 'el-video-gallery-openin-' . $click_trigger;
		$wrapper_class[] = 'el-video-gallery-size-' . $video_size;

		if ( 'on' === $enable_masonry ) {
			$wrapper_class[] = 'el-video-gallery-layout-masonry';
		}

		$output = sprintf(
			'<div class="%2$s" data-autoplay="%3$s">
				<div class="el-video-gallery-container">%4$s %1$s</div>
			</div>',
			et_core_intentionally_unescaped( $this->content, 'html' ),
			implode( ' ', $wrapper_class ),
			esc_attr( $this->props['autoplay_video'] ),
			et_core_intentionally_unescaped( $masonry_gutter, 'html' )
		);

		$numberOfColumns	= et_pb_responsive_options()->get_property_values( $this->props, 'no_of_columns' );
		$column_spacing		= et_pb_responsive_options()->get_property_values( $this->props, 'column_spacing' );

		// Use default main settings for number of columns.
		$numberOfColumns['tablet'] = '' !== $numberOfColumns['tablet'] ? $numberOfColumns['tablet'] : $numberOfColumns['desktop'];
		$numberOfColumns['phone']  = '' !== $numberOfColumns['phone'] ? $numberOfColumns['phone'] : $numberOfColumns['tablet'];

		// Use default main settings for column spacing.
		$column_spacing['tablet'] = '' !== $column_spacing['tablet'] ? $column_spacing['tablet'] : $column_spacing['desktop'];
		$column_spacing['phone']  = '' !== $column_spacing['phone'] ? $column_spacing['phone'] : $column_spacing['tablet'];

		// Set the width of items.
		$breakpoints 	= array( 'desktop', 'tablet', 'phone' );
		if ( 'on' === $enable_masonry ) {
			// Masonry layout.
			$width = array();
			foreach ( $breakpoints as $breakpoint ) {
				if ( 1 === absint( $numberOfColumns[$breakpoint] ) ) {
					$width[$breakpoint] = '100%';
				} else {
					$divided_width 	= 100 / absint( $numberOfColumns[$breakpoint] );
					if ( 0.0 !== floatval( $column_spacing[$breakpoint] ) ) {
						$gutter = floatval( ( floatval( $column_spacing[$breakpoint] ) * ( absint( $numberOfColumns[$breakpoint] ) - 1 ) ) / absint( $numberOfColumns[$breakpoint] ) );
						$divided_width = str_replace( ',', '.', $divided_width );
						$width[$breakpoint] = 'calc(' . $divided_width . '% - ' . $gutter . 'px)';
					} else {
						$width[$breakpoint] = $divided_width . '%';
					}
				}
			}

			et_pb_responsive_options()->generate_responsive_css( $width, '%%order_class%% .el-video-gallery-wrap .el_video_gallery_item', 'width', $render_slug, '!important;', 'range' );
			et_pb_responsive_options()->generate_responsive_css( $column_spacing, '%%order_class%% .el-video-gallery-wrap .el_video_gallery_item_gutter', 'width', $render_slug, '!important;', 'range' );
		} else {
			// Grid layout.
			// Create responsive variables.
			$marginWrapper = $marginItem = $widthItem = array();
			foreach ( $breakpoints as $breakpoint ) {
				$marginWrapper[$breakpoint]	= 'calc(-' . $column_spacing[$breakpoint] . '/2)';
				$marginItem[$breakpoint]	= 'calc(' . $column_spacing[$breakpoint] . '/2)';
				$widthItem[$breakpoint]		= 'calc( calc( 100% / ' . $numberOfColumns[$breakpoint] . ' ) - ' . $column_spacing[$breakpoint] . ' )';
			}

			et_pb_responsive_options()->generate_responsive_css( $marginWrapper, '%%order_class%% .el-video-gallery-container', 'margin-left', $render_slug, '!important;', 'range' );
			et_pb_responsive_options()->generate_responsive_css( $marginWrapper, '%%order_class%% .el-video-gallery-container', 'margin-right', $render_slug, '!important;', 'range' );

			et_pb_responsive_options()->generate_responsive_css( $marginItem, '%%order_class%% .el-video-gallery-wrap .el_video_gallery_item', 'margin-left', $render_slug, '!important;', 'range' );
			et_pb_responsive_options()->generate_responsive_css( $marginItem, '%%order_class%% .el-video-gallery-wrap .el_video_gallery_item', 'margin-right', $render_slug, '!important;', 'range' );
			et_pb_responsive_options()->generate_responsive_css( $widthItem, '%%order_class%% .el-video-gallery-wrap .el_video_gallery_item', 'width', $render_slug, '!important;', 'range' );
		}

		et_pb_responsive_options()->generate_responsive_css( $column_spacing, '%%order_class%% .el-video-gallery-wrap .el_video_gallery_item', 'margin-bottom', $render_slug, '!important;', 'range' );
		
		// Icon.
		$enable_overlay = isset( $this->props['enable_overlay'] ) ? $this->props['enable_overlay'] : 'on';
		$overlay_icon   = isset( $this->props['overlay_icon'] ) ? $this->props['overlay_icon'] : '';
		if ( 'on' === $enable_overlay && '' !== $overlay_icon ) {
			self::set_style( $render_slug, array(
				'selector'    => '%%order_class%% .el-video-gallery-item-overlay .et-pb-icon::before',
				'declaration' => sprintf( 'content: "%1$s";', et_pb_extended_process_font_icon( $overlay_icon ) ),
			) );

			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' => 'overlay_icon',
					'important'      => true,
					'selector'       => '%%order_class%% .el-video-gallery-item-overlay .et-pb-icon::before',
					'processor'      => array(
						'ET_Builder_Module_Helper_Style_Processor',
						'process_extended_icon',
					),
				) );
			}
		}

		// Title and caption.
		$show_title	   = ! empty( $this->props['show_title'] ) ? $this->props['show_title'] : 'off';
		$title_area	   = ! empty( $this->props['title_area'] ) ? $this->props['title_area'] : 'lightbox';
		$show_caption  = ! empty( $this->props['show_caption'] ) ? $this->props['show_caption'] : 'off';
		$caption_area  = ! empty( $this->props['caption_area'] ) ? $this->props['caption_area'] : 'lightbox';

		// Hide overlay.
		if ( 'off' === $enable_overlay ) {
			self::set_style( $render_slug, array(
				'selector'    => '%%order_class%% .el-video-gallery-item .el-video-gallery-item-overlay',
				'declaration' => 'display: none;',
			) );
		}

		// overlay on, but title & caption not to show on overlay
		if ( ( 'off' === $show_title || 'lightbox' === $title_area || 'overlay' === $title_area ) &&
		 	 ( 'off' === $show_caption || 'lightbox' === $caption_area || 'overlay' === $caption_area )
		) {
			self::set_style( $render_slug, array(
				'selector'    => '%%order_class%% .el-video-gallery-item .el-video-gallery-content',
				'declaration' => 'display: none !important;'
			) );
		} else {
			if ( 'lightbox' === $title_area ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .el-video-gallery-content .el-overlay-title',
					'declaration' => 'display: none !important;'
				) );
			} elseif ( 'gallery' === $title_area ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%%_lightbox .mfp-bottom-bar .el-overlay-title',
					'declaration' => 'display: none !important;'
				) );
			}
			if ( 'lightbox' === $caption_area ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .el-video-gallery-content .el-overlay-caption',
					'declaration' => 'display: none !important;'
				) );
			} elseif ( 'gallery' === $caption_area ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%%_lightbox .mfp-bottom-bar .el-overlay-caption',
					'declaration' => 'display: none !important;'
				) );
			}

			// For overlay it does not displayed the title and content.
			// Here, we need to hide main bottom bar area
			if ( ( 'gallery' === $title_area || 'overlay' === $title_area ) && 
				 ( 'gallery' === $caption_area || 'overlay' === $caption_area )
			 ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%%_lightbox .mfp-bottom-bar',
					'declaration' => 'display: none !important;'
				) );
			}
		}

		// Show title or caption, then use container styling.
		if ( 'on' === $show_title || 'on' === $show_caption ) {
			$this->generate_styles( array(
				'base_attr_name' => 'title_caption_container_bg',
				'selector'       => '%%order_class%% .el_video_gallery_item .el-video-gallery-content',
				'hover_selector' => '%%order_class%% .el_video_gallery_item .el-video-gallery-content:hover',
				'css_property'   => 'background-color',
				'render_slug'    => $render_slug,
				'type'           => 'color',
			) );
		}

		// Overlay styles.
		if ( 'on' === $enable_overlay ) {
			$overlay_icon_size 	= et_pb_responsive_options()->get_property_values( $this->props, 'overlay_icon_size' );
			et_pb_responsive_options()->generate_responsive_css( $overlay_icon_size, '%%order_class%% .el-video-gallery-item-overlay .et-pb-icon', 'font-size', $render_slug, '', 'range' );
			if ( '' !== $this->props['overlay_color'] ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .el-video-gallery-item .el-video-gallery-item-overlay',
					'declaration' => sprintf( 'background-color: %1$s;', esc_attr( $this->props['overlay_color'] ) )
				) );
			}
			if ( '' !== $this->props['overlay_icon_color'] ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .el-video-gallery-item-overlay .et-pb-icon',
					'declaration' => sprintf( 'color: %1$s;', esc_attr( $this->props['overlay_icon_color'] ) )
				) );
			}
			if ( 'off' === $this->props['overlay_on_hover'] ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%% .el-video-gallery-item-overlay',
					'declaration' => 'opacity: 1 !important; z-index: 1 !important;'
				) );
			}
		}

		// Lightbox style.
		if ( 'lightbox' === $click_trigger ) {
			if ( ! empty( $this->props['meta_background_color'] ) ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%%_lightbox .mfp-bottom-bar',
					'declaration' => sprintf( 'background-color: %1$s;', esc_attr( $this->props['meta_background_color'] ) )
				) );
			}
			if ( ! empty( $this->props['lightbox_background_color'] ) ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%%_lightbox.mfp-bg',
					'declaration' => sprintf( 'background-color: %1$s;', esc_attr( $this->props['lightbox_background_color'] ) )
				) );
			}
			if ( ! empty( $this->props['lightbox_close_icon_color'] ) ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%%_lightbox .mfp-close',
					'declaration' => sprintf( 'color: %1$s;', esc_attr( $this->props['lightbox_close_icon_color'] ) )
				) );
			}
			if ( ! empty( $this->props['lightbox_arrows_color'] ) ) {
				self::set_style( $render_slug, array(
					'selector'    => '%%order_class%%_lightbox .mfp-arrow:after',
					'declaration' => sprintf( 'color: %1$s;', esc_attr( $this->props['lightbox_arrows_color'] ) )
				) );
			}
		}

		$fields = array( 'gallery_item_margin_padding' );
		DiviGalleryExtendedHelper::process_advanced_margin_padding_css( $this, $render_slug, $this->margin_padding, $fields );
		
		return et_core_intentionally_unescaped( $output, 'html' );
	}
}

new EL_VideoGallery();