<?php

namespace ElementPack\Modules\VideoGallery\Widgets;

use ElementPack\Base\Module_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Css_Filter;
use Elementor\Group_Control_Text_Shadow;
use ElementPack\Utils;

use Elementor\Repeater;

use Elementor\Modules\DynamicTags\Module as TagsModule;

if ( ! defined( 'ABSPATH' ) )
	exit; // Exit if accessed directly

class Video_Gallery extends Module_Base {

	public function get_name() {
		return 'bdt-video-gallery';
	}

	public function get_title() {
		return BDTEP . esc_html__( 'Video Gallery', 'bdthemes-element-pack' );
	}

	public function get_icon() {
		return 'bdt-wi-video-gallery';
	}

	public function get_categories() {
		return [ 'element-pack' ];
	}

	public function get_keywords() {
		return [ 'video', 'gallery' ];
	}

	public function get_style_depends() {
		if ( $this->ep_is_edit_mode() ) {
			return [ 'ep-styles' ];
		} else {
			return [ 'ep-video-gallery' ];
		}
	}

	public function get_script_depends() {
		if ( $this->ep_is_edit_mode() ) {
			return [ 'rvslider', 'ep-scripts' ];
		} else {
			return [ 'rvslider', 'ep-video-gallery' ];
		}
	}


	public function get_custom_help_url() {
		return 'https://youtu.be/wbkou6p7l3s';
	}

	public function has_widget_inner_wrapper(): bool {
        return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
    }
	protected function is_dynamic_content(): bool {
		return false;
	}

	public function register_controls() {

		$this->start_controls_section(
			'section_custom_gallery_content',
			[ 
				'label' => esc_html__( 'Video Gallery', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'thumb_layout',
			[ 
				'label'   => esc_html__( 'Thumb Layout', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'vertical',
				'options' => [ 
					'vertical'   => esc_html__( 'Vertical', 'bdthemes-element-pack' ),
					'horizontal' => esc_html__( 'Horizontal', 'bdthemes-element-pack' ),
				],
			]
		);

		$repeater = new Repeater();

		$repeater->start_controls_tabs( 'tabs_content_video_gallery' );

		$repeater->start_controls_tab(
			'tab_video_gallery_source',
			[ 
				'label' => esc_html__( 'Source', 'bdthemes-element-pack' ),
			]
		);

		$repeater->add_control(
			'source_type',
			[ 
				'label'       => esc_html__( 'Video Type', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => 'remote_url',
				'label_block' => true,
				'options'     => [ 
					'remote_url' => esc_html__( 'Remote Video', 'bdthemes-element-pack' ),
					'hosted_url' => esc_html__( 'Local Video', 'bdthemes-element-pack' ),
				],
			]
		);

		$repeater->add_control(
			'remote_url',
			[ 
				'type'          => Controls_Manager::URL,
				'label'         => __( 'Video Source', 'bdthemes-element-pack' ),
				'label_block'   => true,
				'options' => false,
				'placeholder'   => __( 'https://www.youtube.com/watch?v=vN9DnFiRMX0&feature=youtu.be', 'bdthemes-element-pack' ),
				'dynamic'       => [ 'active' => true ],
				'default'       => [ 
					'url' => __( 'https://www.youtube.com/watch?v=vN9DnFiRMX0&feature=youtu.be', 'bdthemes-element-pack' ),
				],
				'condition'     => [ 
					'source_type' => 'remote_url',
				],
			]
		);

		$repeater->add_control(
			'hosted_url',
			[ 
				'type'       => Controls_Manager::MEDIA,
				'dynamic'    => [ 
					'active'     => true,
					'categories' => [ 
						TagsModule::POST_META_CATEGORY,
						TagsModule::MEDIA_CATEGORY,
					],
				],
				'media_type' => 'video',
				'condition'  => [ 
					'source_type' => 'hosted_url'
				],
			]
		);

		$repeater->end_controls_tab();

		$repeater->start_controls_tab(
			'tab_video_gallery_desc',
			[ 
				'label' => esc_html__( 'Description', 'bdthemes-element-pack' ),
			]
		);

		$repeater->add_control(
			'title',
			[ 
				'label'       => esc_html__( 'Title and Description', 'bdthemes-element-pack' ),
				'label_block' => true,
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => [ 'active' => true ],
				'default'     => esc_html__( 'Video Title', 'bdthemes-element-pack' ),
			]
		);

		$repeater->add_control(
			'desc',
			[ 
				'type'    => Controls_Manager::TEXTAREA,
				'dynamic' => [ 'active' => true ],
				'default' => esc_html__( 'Women typing keyboard', 'bdthemes-element-pack' ),
			]
		);

		$repeater->end_controls_tab();

		$repeater->start_controls_tab(
			'tab_video_gallery_poster',
			[ 
				'label' => esc_html__( 'Poster', 'bdthemes-element-pack' ),
			]
		);

		$repeater->add_control(
			'poster',
			[ 
				'label'   => esc_html__( 'Poster', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::MEDIA,
				'dynamic' => [ 'active' => true ]
			]
		);

		$repeater->end_controls_tab();

		$repeater->end_controls_tabs();

		$this->add_control(
			'video_gallery',
			[ 
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => [ 
					[ 
						'title'      => esc_html__( 'Youtube Video', 'bdthemes-element-pack' ),
						'desc'       => esc_html__( 'Women typing keyboard', 'bdthemes-element-pack' ),
						'remote_url' => [ 'url' => 'https://www.youtube.com/watch?v=vN9DnFiRMX0&feature=youtu.be' ],
					],
					[ 
						'title'      => esc_html__( 'Vimeo Video', 'bdthemes-element-pack' ),
						'desc'       => esc_html__( 'Auto VR Concept', 'bdthemes-element-pack' ),
						'remote_url' => [ 'url' => 'https://vimeo.com/258349022' ],
					],
					[ 
						'title'      => esc_html__( 'Wista Video', 'bdthemes-element-pack' ),
						'desc'       => esc_html__( 'Brendan - Make It Clap', 'bdthemes-element-pack' ),
						'remote_url' => [ 'url' => 'https://home.wistia.com/medias/e4a27b971d' ],
					],
					[ 
						'title'      => esc_html__( 'Dailymotion Video', 'bdthemes-element-pack' ),
						'desc'       => esc_html__( 'Drama B - DREAMS', 'bdthemes-element-pack' ),
						'remote_url' => [ 'url' => 'http://www.dailymotion.com/embed/video/x2ioxee' ],
					],
					[ 
						'title'      => esc_html__( 'MP4 Format Video', 'bdthemes-element-pack' ),
						'desc'       => esc_html__( 'BdThemes Intro', 'bdthemes-element-pack' ),
						'remote_url' => [ 'url' => '//test-videos.co.uk/vids/bigbuckbunny/mp4/av1/1080/Big_Buck_Bunny_1080_10s_1MB.mp4' ],
					],
					[ 
						'title'      => esc_html__( 'WEBM Format Video', 'bdthemes-element-pack' ),
						'desc'       => esc_html__( 'Fish Frenzy - Oceans Clip', 'bdthemes-element-pack' ),
						'remote_url' => [ 'url' => 'https://s3.amazonaws.com/fooplugins/rvs/oceans-clip.webm' ],
					],
					[ 
						'title'      => esc_html__( 'OGV Format Video', 'bdthemes-element-pack' ),
						'desc'       => esc_html__( 'Fish Frenzy - Oceans Clip', 'bdthemes-element-pack' ),
						'remote_url' => [ 'url' => 'https://s3.amazonaws.com/fooplugins/rvs/oceans-clip.ogv' ],
					],
				],
				'title_field' => '{{{ title }}}',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_content_video',
			[ 
				'label' => esc_html__( 'Video', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'show_video_title',
			[ 
				'label'   => esc_html__( 'Title', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'show_video_title_tags',
			[ 
				'label'     => __( 'Title HTML Tag', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'h2',
				'options'   => element_pack_title_tags(),
				'condition' => [ 
					'show_video_title' => 'yes',
				]
			]
		);

		///

		$this->add_control(
			'show_video_desc',
			[ 
				'label'   => esc_html__( 'Description', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_content_thumbnail',
			[ 
				'label' => esc_html__( 'Playlist', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'show_thumbnail_thumb',
			[ 
				'label'   => esc_html__( 'Thumbnail', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
				// 'prefix_class' => 'bdt-video-gallery-thumbnail-',
			]
		);

		$this->add_control(
			'show_thumbnail_title',
			[ 
				'label'   => esc_html__( 'Title', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
				// 'prefix_class' => 'bdt-video-gallery-title-',
			]
		);

		$this->add_control(
			'thumbnail_title_tags',
			[ 
				'label'     => __( 'Title HTML Tag', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'h4',
				'options'   => element_pack_title_tags(),
				'condition' => [ 
					'show_thumbnail_title' => 'yes',
				]
			]
		);

		$this->add_control(
			'show_thumbnail_desc',
			[ 
				'label'   => esc_html__( 'Description', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
				// 'prefix_class' => 'bdt-video-gallery-desc-',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_content_additional',
			[ 
				'label' => esc_html__( 'Additional', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'show_play_btn_on_hover',
			[ 
				'label' => esc_html__( 'Play Button on Hover', 'bdthemes-element-pack' ),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		/*$this->add_control(
							  'play_on_click_thumb',
							  [
								  'label' => esc_html__( 'Play on Click Thumb', 'bdthemes-element-pack' ),
								  'type'  => Controls_Manager::SWITCHER,
							  ]
						  );*/

		$this->add_control(
			'continuous_play',
			[ 
				'label' => esc_html__( 'Play when Navigate', 'bdthemes-element-pack' ),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		$this->add_control(
			'youtube_autoplay_muted',
			[ 
				'label'       => esc_html__( 'YouTube: Autoplay Muted', 'bdthemes-element-pack' ),
				'description' => esc_html__( 'On: one click to play (muted). Off: tries sound; many browsers will still require a second click.', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SWITCHER,
				'default'     => 'yes',
			]
		);

		$this->add_control(
			'arrow_always_show',
			[ 
				'label'        => esc_html__( 'Show Arrows Always?', 'bdthemes-element-pack' ) . BDTEP_NC,
				'type'         => Controls_Manager::SWITCHER,
				'prefix_class' => 'bdt-show-arrows-always-'
			]
		);

		$this->add_control(
			'hide_close_btn',
			[ 
				'label'        => esc_html__( 'Hide Close Button', 'bdthemes-element-pack' ) . BDTEP_NC,
				'type'         => Controls_Manager::SWITCHER,
				'prefix_class' => 'bdt-hide-close-btn-'
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_video_title',
			[ 
				'label'     => esc_html__( 'Video Title', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 
					'show_video_title' => 'yes',
				],
			]
		);

		$this->add_control(
			'video_title_color',
			[ 
				'label'     => esc_html__( 'Text Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-item-text h2' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'video_title_background_color',
			[ 
				'label'     => esc_html__( 'Background', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-item-text h2' => 'background-color: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[ 
				'name'     => 'video_title_text_shadow',
				'selector' => '{{WRAPPER}} .rvs-item-text h2',
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'     => 'video_title_typography',
				'label'    => esc_html__( 'Typography', 'bdthemes-element-pack' ),
				//'scheme'   => Schemes\Typography::TYPOGRAPHY_1,
				'selector' => '{{WRAPPER}} .rvs-item-text h2',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_video_desc',
			[ 
				'label'     => esc_html__( 'Video Description', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 
					'show_video_desc' => 'yes',
				],
			]
		);

		$this->add_control(
			'video_desc_color',
			[ 
				'label'     => esc_html__( 'Text Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-vg-video-desc' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'video_desc_background_color',
			[ 
				'label'     => esc_html__( 'Background', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-vg-video-desc' => 'background-color: {{VALUE}}',
				],
			]
		);

		$this->add_responsive_control(
			'video_desc_space',
			[ 
				'label'     => __( 'Space', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'max'  => 200,
						'min'  => 0,
						'step' => 2
					]
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-vg-video-desc' => 'margin-top: {{SIZE}}{{UNIT}};'
				]
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'     => 'video_desc_typography',
				'label'    => esc_html__( 'Typography', 'bdthemes-element-pack' ),
				//'scheme'   => Schemes\Typography::TYPOGRAPHY_4,
				'selector' => '{{WRAPPER}} .bdt-vg-video-desc',
			]
		);

		$this->end_controls_section();


		$this->start_controls_section(
			'section_style_poster',
			[ 
				'label' => __( 'Poster', 'bdthemes-element-pack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'poster_bg_position',
			[ 
				'label'     => esc_html__( 'Position', 'bdthemes-element-pack' ) . BDTEP_NC,
				'type'      => Controls_Manager::SELECT,
				'default'   => '',
				'options'   => [ 
					''              => esc_html__( 'Default', 'bdthemes-element-pack' ),
					'center center' => esc_html__( 'Center Center', 'bdthemes-element-pack' ),
					'center left'   => esc_html__( 'Center Left', 'bdthemes-element-pack' ),
					'center right'  => esc_html__( 'Center Right', 'bdthemes-element-pack' ),
					'top center'    => esc_html__( 'Top Center', 'bdthemes-element-pack' ),
					'top left'      => esc_html__( 'Top Left', 'bdthemes-element-pack' ),
					'top right'     => esc_html__( 'Top Right', 'bdthemes-element-pack' ),
					'bottom center' => esc_html__( 'Bottom Center', 'bdthemes-element-pack' ),
					'bottom left'   => esc_html__( 'Bottom Left', 'bdthemes-element-pack' ),
					'bottom right'  => esc_html__( 'Bottom Right', 'bdthemes-element-pack' ),
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-video-gallery .rvs-item' => 'background-position: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'poster_bg_size',
			[ 
				'label'     => esc_html__( 'Size', 'bdthemes-element-pack' ) . BDTEP_NC,
				'type'      => Controls_Manager::SELECT,
				'default'   => '',
				'options'   => [ 
					''        => esc_html__( 'Default', 'bdthemes-element-pack' ),
					'auto'    => esc_html__( 'Auto', 'bdthemes-element-pack' ),
					'cover'   => esc_html__( 'Cover', 'bdthemes-element-pack' ),
					'contain' => esc_html__( 'Contain', 'bdthemes-element-pack' ),
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-video-gallery .rvs-item' => 'background-size: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_thumb_item',
			[ 
				'label' => __( 'Playlist', 'bdthemes-element-pack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->start_controls_tabs( 'tabs_thumb_item_style' );

		$this->start_controls_tab(
			'tab_thumb_item_normal',
			[ 
				'label' => __( 'Normal', 'bdthemes-element-pack' )
			]
		);

		$this->add_control(
			'thumb_item_bg',
			[ 
				'label'     => __( 'Background', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'thumb_item_padding',
			[ 
				'label'     => __( 'Padding', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-container a.rvs-nav-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'thumb_item_margin',
			[ 
				'label'     => __( 'Margin', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'      => 'thumb_item_border',
				'selector'  => '{{WRAPPER}} .rvs-nav-item',
				'separator' => 'before',
			]
		);

		$this->add_responsive_control(
			'thumb_item_radius',
			[ 
				'label'      => __( 'Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .rvs-nav-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'thumb_item_shadow',
				'selector' => '{{WRAPPER}} .rvs-nav-item span',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_thumb_item_hover',
			[ 
				'label' => __( 'Hover', 'bdthemes-element-pack' )
			]
		);

		$this->add_control(
			'thumb_item_hover_bg',
			[ 
				'label'     => __( 'Background', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'thumb_item_hover_border_color',
			[ 
				'label'     => __( 'Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item:hover' => 'border-color: {{VALUE}} !important;',
				]
			]
		);

		$this->add_responsive_control(
			'thumb_item_hover_radius',
			[ 
				'label'      => __( 'Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .rvs-nav-item:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'thumb_item_hover_shadow',
				'selector' => '{{WRAPPER}} .rvs-nav-item:hover',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_thumb_item_active',
			[ 
				'label' => __( 'Active', 'bdthemes-element-pack' )
			]
		);

		$this->add_control(
			'thumb_item_active_bg',
			[ 
				'label'     => __( 'Background', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item.rvs-active' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'thumb_item_active_border_color',
			[ 
				'label'     => __( 'Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item.rvs-active' => 'border-color: {{VALUE}} !important;',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_thumbnail',
			[ 
				'label'     => __( 'Thumbnail', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 
					'show_thumbnail_thumb' => 'yes',
				],
			]
		);

		$this->add_responsive_control(
			'thumb_width',
			[ 
				'label'          => __( 'Width', 'bdthemes-element-pack' ),
				'type'           => Controls_Manager::SLIDER,
				'default'        => [ 
					'unit' => '%',
				],
				'tablet_default' => [ 
					'unit' => '%',
				],
				'mobile_default' => [ 
					'unit' => '%',
				],
				'size_units'     => [ 'px', '%' ],
				'range'          => [ 
					'%' => [ 
						'min' => 30,
						'max' => 100,
					],
				],
				'selectors'      => [ 
					'{{WRAPPER}} .rvs-nav-item span' => 'width: {{SIZE}}{{UNIT}};margin-left: auto;margin-right: auto;',
				],
			]
		);

		$this->add_responsive_control(
			'thumbnail_margin',
			[ 
				'label'     => __( 'Margin', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item span' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'thumbnail_padding',
			[ 
				'label'     => __( 'Padding', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item span' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'      => 'thumbnail_border',
				'selector'  => '{{WRAPPER}} .rvs-nav-item span',
			]
		);

		$this->add_responsive_control(
			'thumbnail_radius',
			[ 
				'label'      => __( 'Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .rvs-nav-item span' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'thumbnail_shadow',
				'selector' => '{{WRAPPER}} .rvs-nav-item span',
			]
		);

		$this->start_controls_tabs( 'thumbnail_effects' );

		$this->start_controls_tab(
			'normal',
			[ 
				'label' => __( 'Normal', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'opacity',
			[ 
				'label'     => __( 'Opacity', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'max'  => 1,
						'min'  => 0.10,
						'step' => 0.01,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item span' => 'opacity: {{SIZE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[ 
				'name'      => 'css_filters',
				'separator' => 'before',
				'selector'  => '{{WRAPPER}} .rvs-nav-item span',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'hover',
			[ 
				'label' => __( 'Hover', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'opacity_hover',
			[ 
				'label'     => __( 'Opacity', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'max'  => 1,
						'min'  => 0.10,
						'step' => 0.01,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item span:hover' => 'opacity: {{SIZE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[ 
				'name'     => 'css_filters_hover',
				'selector' => '{{WRAPPER}} .rvs-nav-item span:hover',
			]
		);

		$this->add_control(
			'background_hover_transition',
			[ 
				'label'     => __( 'Transition Duration (s)', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'max'  => 3,
						'step' => 0.1,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item span' => 'transition-duration: {{SIZE}}s',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_thumbnail_title',
			[ 
				'label'     => esc_html__( 'Thumbnail Title', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 
					'show_thumbnail_title' => 'yes',
				],
			]
		);

		$this->add_control(
			'thumbnail_title_color',
			[ 
				'label'     => esc_html__( 'Text Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item-title' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'thumbnail_title_hover_color',
			[ 
				'label'     => esc_html__( 'Text Hover Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item-title:hover' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'     => 'thumbnail_title_typography',
				'label'    => esc_html__( 'Typography', 'bdthemes-element-pack' ),
				//'scheme'   => Schemes\Typography::TYPOGRAPHY_1,
				'selector' => '{{WRAPPER}} .rvs-nav-container .rvs-nav-item-title',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_thumbnail_desc',
			[ 
				'label'     => esc_html__( 'Thumbnail Description', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 
					'show_thumbnail_desc' => 'yes',
				],
			]
		);

		$this->add_control(
			'thumbnail_desc_color',
			[ 
				'label'     => esc_html__( 'Text Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item-credits' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'thumbnail_desc_hover_color',
			[ 
				'label'     => esc_html__( 'Text Hover Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item-credits:hover' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'     => 'thumbnail_desc_typography',
				'label'    => esc_html__( 'Typography', 'bdthemes-element-pack' ),
				//'scheme'   => Schemes\Typography::TYPOGRAPHY_4,
				'selector' => '{{WRAPPER}} .rvs-nav-container .rvs-nav-item-credits',
			]
		);

		$this->add_responsive_control(
			'thumbnail_desc_space',
			[ 
				'label'     => __( 'Spacing', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-nav-item-credits' => 'margin-top: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_play_button',
			[ 
				'label' => __( 'Play/Pause Button', 'bdthemes-element-pack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->start_controls_tabs( 'tabs_play_button' );

		$this->start_controls_tab(
			'tab_play_btn_normal',
			[ 
				'label' => __( 'Normal', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'play_btn_icon_color',
			[ 
				'label'     => __( 'Icon Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-play-video' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'play_btn_bg',
			[ 
				'label'     => __( 'Background', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-play-video' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'play_btn_size',
			[ 
				'label'     => __( 'Size (px)', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min'  => 20,
						'max'  => 200,
						'step' => 2
					]
				],
				'selectors' => [ 
					'{{WRAPPER}} .rvs-container a.rvs-play-video' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};'
				]
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'        => 'play_btn_border',
				'separator'   => 'before',
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '{{WRAPPER}} .rvs-play-video'
			]
		);

		$this->add_responsive_control(
			'play_btn_radius',
			[ 
				'label'      => __( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'separator'  => 'before',
				'selectors'  => [ 
					'{{WRAPPER}} .rvs-play-video' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'play_btn_shadow',
				'selector' => '{{WRAPPER}} .rvs-play-video',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_play_btn_hover',
			[ 
				'label' => __( 'Hover', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'play_btn_hover_icon_color',
			[ 
				'label'     => __( 'Icon Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-play-video:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'play_btn_hover_bg',
			[ 
				'label'     => __( 'Background', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .rvs-play-video:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'play_btn_hover_border_color',
			[ 
				'label'     => __( 'Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'condition' => [ 
					'play_btn_border_border!' => '',
				],
				'selectors' => [ 
					'{{WRAPPER}} .rvs-play-video:hover' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'play_btn_hover_shadow',
				'selector' => '{{WRAPPER}} .rvs-play-video:hover',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	public function render() {
		$settings = $this->get_settings_for_display();

		$this->render_header();

		foreach ( $settings['video_gallery'] as $video ) :

			$video_poster = ( $video['poster']['url'] ) ? $video['poster']['url'] : BDTEP_ASSETS_URL . 'images/video-thumbnail.svg';
			$video_source = isset( $video['remote_url']['url'] ) ? $video['remote_url']['url'] : '';

			if ( 'hosted_url' == $video['source_type'] ) {
				$video_source = $video['hosted_url']['url'];
			} else {
				$youtube_id = ( preg_match( '%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $video['remote_url']['url'], $match ) ) ? $match[1] : false;

				$vimeo_id = ( preg_match( '%^https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)(?:[?]?.*)$%im', $video['remote_url']['url'], $match ) ) ? $match[3] : false;

				if ( $youtube_id ) {
					// With mute=1, embed autoplays in one click (browsers allow muted autoplay). Without it, unmuted is attempted but often blocked.
					$mute_param = ( ! empty( $settings['youtube_autoplay_muted'] ) && 'yes' === $settings['youtube_autoplay_muted'] ) ? '&mute=1' : '';
					$video_source = 'https://www.youtube.com/watch?v=' . $youtube_id . $mute_param;
					$video_poster = ( $video['poster']['url'] ) ? $video['poster']['url'] : 'https://img.youtube.com/vi/' . $youtube_id . '/maxresdefault.jpg';
				} elseif ( $vimeo_id ) {
					$video_source = 'https://vimeo.com/' . $vimeo_id;
					$video_poster = ( $video['poster']['url'] ) ? $video['poster']['url'] : 'https://i.vimeocdn.com/video/' . $vimeo_id . '.webp?mw=960&mh=540';
				}
			}

			if ( ! $video_source ) {
				$video_poster = BDTEP_ASSETS_URL . 'images/no-video.svg';
			}

			?>
			<!-- items go here -->
			<div class="rvs-item" style="background-image: url(<?php echo esc_url( $video_poster ); ?>)">

				<?php if ( $settings['show_video_title'] or $settings['show_video_desc'] ) : ?>
					<div class="rvs-item-text">

						<?php if ( $settings['show_video_title'] ) : ?>
							<<?php echo esc_attr( Utils::get_valid_html_tag( $settings['show_video_title_tags'] ) ); ?>
								class="bdt-vg-video-title">
								<?php echo esc_html( $video['title'] ); ?>
							</<?php echo esc_attr( Utils::get_valid_html_tag( $settings['show_video_title_tags'] ) ); ?>>
						<?php endif; ?>

						<?php if ( $settings['show_video_desc'] ) : ?>
							<div class="bdt-vg-video-desc">
								<?php echo wp_kses_post( $video['desc'] ); ?>
							</div>
						<?php endif; ?>

					</div>
				<?php endif; ?>

				<a href="<?php echo esc_url( $video_source ); ?>" class="rvs-play-video"></a>
			</div>

		<?php endforeach; ?>


		</div>
		</div>

		<?php if ( 'yes' == $settings['show_thumbnail_thumb'] or 'yes' == $settings['show_thumbnail_title'] or 'yes' == $settings['show_thumbnail_desc'] ) : ?>
			<div class="rvs-nav-container">
				<a class="rvs-nav-prev"></a>
				<div class="rvs-nav-stage">

					<?php foreach ( $settings['video_gallery'] as $video ) :

						$video_thumbnail = ( $video['poster']['url'] ) ? $video['poster']['url'] : BDTEP_ASSETS_URL . 'images/video-thumbnail.svg';

						if ( 'hosted_url' == $video['source_type'] ) {
							$video_source = ! empty( $video['hosted_url']['url'] ) ? true : false;
						} else {
							$video_source = ! empty( $video['remote_url']['url'] ) ? true : false;
						}

						$youtube_id = false;
						if ( isset( $video['remote_url']['url'] ) && ! empty( $video['remote_url']['url'] ) ) {
							$youtube_id = ( preg_match( '%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $video['remote_url']['url'], $match ) ) ? $match[1] : false;
						}

						$vimeo_id = false;
						if ( isset( $video['remote_url']['url'] ) && ! empty( $video['remote_url']['url'] ) ) {
							$vimeo_id = ( preg_match( '%^https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)(?:[?]?.*)$%im', $video['remote_url']['url'], $match ) ) ? $match[3] : false;
						}

						if ( $youtube_id ) {
							$video_thumbnail = ( $video['poster']['url'] ) ? $video['poster']['url'] : 'https://img.youtube.com/vi/' . $youtube_id . '/default.jpg';
							$video_source = true;
						} elseif ( $vimeo_id ) {
							$video_thumbnail = ( $video['poster']['url'] ) ? $video['poster']['url'] : 'https://i.vimeocdn.com/video/' . $vimeo_id . '.webp?mw=60&mh=60';
							$video_source = true;
						}

						if ( ! $video_source ) {
							$video_thumbnail = BDTEP_ASSETS_URL . 'images/no-video.svg';
						}

						?>
						<!-- nav items go here -->
						<a class="rvs-nav-item">

							<?php if ( 'yes' == $settings['show_thumbnail_thumb'] ) : ?>
								<span class="rvs-nav-item-thumb"
									style="background-image: url(<?php echo esc_url( $video_thumbnail ); ?>)"></span>
							<?php endif; ?>

							<?php if ( 'yes' == $settings['show_thumbnail_title'] ) : ?>
								<<?php echo esc_attr( Utils::get_valid_html_tag( $settings['thumbnail_title_tags'] ) ); ?>
									class="rvs-nav-item-title" title="
									<?php echo esc_html( $video['title'] ); ?>">
									<?php echo esc_html( $video['title'] ); ?>
								</<?php echo esc_attr( Utils::get_valid_html_tag( $settings['thumbnail_title_tags'] ) ); ?>>
							<?php endif; ?>

							<?php if ( 'yes' == $settings['show_thumbnail_desc'] ) : ?>
								<div class="rvs-nav-item-credits" title="<?php echo wp_kses_post( $video['desc'] ); ?>">
									<?php echo wp_kses_post( $video['desc'] ); ?>
								</div>
							<?php endif; ?>
						</a>

					<?php endforeach; ?>

				<?php endif;

		$this->render_footer();
	}

	public function render_header() {
		$settings = $this->get_settings_for_display();

		$this->add_render_attribute( 'video-gallery', 'class', [ 'bdt-video-gallery', 'rvs-container', 'rvs-flat-circle-play' ] );

		if ( 'horizontal' == $settings['thumb_layout'] ) {
			$this->add_render_attribute( 'video-gallery', 'class', 'rvs-horizontal' );
		}

		if ( $settings['show_play_btn_on_hover'] ) {
			$this->add_render_attribute( 'video-gallery', 'class', 'rvs-show-play-on-hover' );
		}

		if ( $settings['continuous_play'] ) {
			$this->add_render_attribute( 'video-gallery', 'class', 'rvs-continuous-play' );
		}

		if ( 'yes' !== $settings['show_thumbnail_desc'] ) {
			$this->add_render_attribute( 'video-gallery', 'class', 'rvs-hide-credits' );
		}

		?>
				<div <?php $this->print_render_attribute_string( 'video-gallery' ); ?>>
					<div class="rvs-item-container">
						<div class="rvs-item-stage">
							<?php
	}

	public function render_footer() {
		?>
						</div>
						<a class="rvs-nav-next"></a>
					</div>
				</div>
				<?php
	}
}