<?php
namespace ElementPack\Modules\LogoCarousel\Widgets;

use ElementPack\Base\Module_Base;
use Elementor\Group_Control_Css_Filter;
use Elementor\Repeater;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Utils;

use ElementPack\Traits\Global_Mask_Controls;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

class Logo_Carousel extends Module_Base {

	use Global_Mask_Controls;

	public function get_name() {
		return 'bdt-logo-carousel';
	}

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

	public function get_icon() {
		return 'bdt-wi-logo-carousel';
	}

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

	public function get_keywords() {
		return [ 'logo', 'carousel', 'client', 'brand', 'showcase' ];
	}

	public function get_style_depends() {
		return $this->ep_is_edit_mode() ? [ 'swiper', 'ep-styles' ] : [ 'swiper', 'ep-font', 'ep-logo-carousel', 'tippy' ];
	}

	public function get_script_depends() {
		return $this->ep_is_edit_mode() ? [ 'swiper', 'popper', 'tippyjs', 'ep-scripts' ] : [ 'swiper', 'popper', 'tippyjs', 'ep-logo-carousel' ];
	}

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

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

	protected function register_controls() {
		$this->start_controls_section(
			'ep_section_layout',
			[ 
				'label' => __( 'Layout', 'bdthemes-element-pack' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_responsive_control(
			'columns',
			[ 
				'label'          => esc_html__( 'Columns', 'bdthemes-element-pack' ),
				'type'           => Controls_Manager::SELECT,
				'default'        => '4',
				'tablet_default' => '3',
				'mobile_default' => '1',
				'options'        => [ 
					'1' => '1',
					'2' => '2',
					'3' => '3',
					'4' => '4',
					'5' => '5',
					'6' => '6',
				],
			]
		);

		$this->add_responsive_control(
			'item_gap',
			[ 
				'label'     => esc_html__( 'Column Gap', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'default'   => [ 
					'size' => 10,
				],
				'range'     => [ 
					'px' => [ 
						'min'  => 0,
						'max'  => 100,
						'step' => 5,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-logo-carousel-wrapper.bdt-grid'     => 'margin-left: -{{SIZE}}px',
					'{{WRAPPER}} .bdt-logo-carousel-wrapper.bdt-grid > *' => 'padding-left: {{SIZE}}px',
				],
			]
		);

		$this->add_responsive_control(
			'height',
			[ 
				'label'      => __( 'Item Height', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [ 
					'px' => [ 
						'max' => 500,
						'min' => 100,
					]
				],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-logo-carousel-item' => 'height: {{SIZE}}{{UNIT}};'
				],
			]
		);

		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			[ 
				'name'      => 'thumbnail',
				'default'   => 'large',
				'separator' => 'before',
				'exclude'   => [ 
					'custom'
				]
			]
		);

		$this->add_control(
			'image_mask_popover',
			[ 
				'label'        => esc_html__( 'Image Mask', 'bdthemes-element-pack' ),
				'type'         => Controls_Manager::POPOVER_TOGGLE,
				'render_type'  => 'template',
				'return_value' => 'yes',
			]
		);

		//Global Image Mask Controls
		$this->register_image_mask_controls();

		$this->end_controls_section();

		$this->start_controls_section(
			'ep_section_logo',
			[ 
				'label' => __( 'Logo Carousel Item', 'bdthemes-element-pack' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'image',
			[ 
				'label'   => __( 'Logo Image', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::MEDIA,
				'dynamic' => ['active' => true],
				'default' => [ 
					'url' => Utils::get_placeholder_image_src(),
				],
			]
		);

		$repeater->add_control(
			'link',
			[ 
				'label'   => __( 'Website Url', 'bdthemes-element-pack' ),
				'dynamic' => ['active' => true],
				'type'    => Controls_Manager::URL,
			]
		);

		$repeater->add_control(
			'name',
			[ 
				'label'   => __( 'Brand Name', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::TEXT,
				'dynamic' => ['active' => true],
				'default' => __( 'Brand Name', 'bdthemes-element-pack' ),
			]
		);

		$repeater->add_control(
			'description',
			[ 
				'label'   => __( 'Description', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::TEXTAREA,
				'dynamic' => ['active' => true],
				'default' => __( 'Brand Short Description Type Here.', 'bdthemes-element-pack' ),
			]
		);

		$repeater->add_control(
			'logo_tooltip',
			[ 
				'label' => __( 'Tooltip', 'bdthemes-element-pack' ),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		$repeater->add_control(
			'logo_tooltip_placement',
			[ 
				'label'     => esc_html__( 'Placement', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'top',
				'options'   => [ 
					'top-start'    => esc_html__( 'Top Left', 'bdthemes-element-pack' ),
					'top'          => esc_html__( 'Top', 'bdthemes-element-pack' ),
					'top-end'      => esc_html__( 'Top Right', 'bdthemes-element-pack' ),
					'bottom-start' => esc_html__( 'Bottom Left', 'bdthemes-element-pack' ),
					'bottom'       => esc_html__( 'Bottom', 'bdthemes-element-pack' ),
					'bottom-end'   => esc_html__( 'Bottom Right', 'bdthemes-element-pack' ),
					'left'         => esc_html__( 'Left', 'bdthemes-element-pack' ),
					'right'        => esc_html__( 'Right', 'bdthemes-element-pack' ),
				],
				'condition' => [ 
					'logo_tooltip' => 'yes',
				],
			]
		);

		$this->add_control(
			'logo_list',
			[ 
				'show_label'  => false,
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'title_field' => '{{{ name }}}',
				'default'     => [ 
					[ 'image' => [ 'url' => BDTEP_ASSETS_URL . 'images/gallery/item-1.svg' ] ],
					[ 'image' => [ 'url' => BDTEP_ASSETS_URL . 'images/gallery/item-2.svg' ] ],
					[ 'image' => [ 'url' => BDTEP_ASSETS_URL . 'images/gallery/item-3.svg' ] ],
					[ 'image' => [ 'url' => BDTEP_ASSETS_URL . 'images/gallery/item-4.svg' ] ],
					[ 'image' => [ 'url' => BDTEP_ASSETS_URL . 'images/gallery/item-5.svg' ] ],
					[ 'image' => [ 'url' => BDTEP_ASSETS_URL . 'images/gallery/item-6.svg' ] ],
					[ 'image' => [ 'url' => BDTEP_ASSETS_URL . 'images/gallery/item-7.svg' ] ],
					[ 'image' => [ 'url' => BDTEP_ASSETS_URL . 'images/gallery/item-8.svg' ] ],
				]
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_tooltip_settings',
			[ 
				'label' => __( 'Tooltip Settings', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'logo_tooltip_animation',
			[ 
				'label'       => esc_html__( 'Animation', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => 'shift-toward',
				'options'     => [ 
					'shift-away'   => esc_html__( 'Shift-Away', 'bdthemes-element-pack' ),
					'shift-toward' => esc_html__( 'Shift-Toward', 'bdthemes-element-pack' ),
					'fade'         => esc_html__( 'Fade', 'bdthemes-element-pack' ),
					'scale'        => esc_html__( 'Scale', 'bdthemes-element-pack' ),
					'perspective'  => esc_html__( 'Perspective', 'bdthemes-element-pack' ),
				],
				'render_type' => 'template',
			]
		);

		$this->add_control(
			'logo_tooltip_x_offset',
			[ 
				'label'   => esc_html__( 'Offset', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SLIDER,
				'default' => [ 
					'size' => 0,
				],
			]
		);

		$this->add_control(
			'logo_tooltip_y_offset',
			[ 
				'label'   => esc_html__( 'Distance', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SLIDER,
				'default' => [ 
					'size' => 0,
				],
			]
		);

		$this->add_control(
			'logo_tooltip_arrow',
			[ 
				'label' => esc_html__( 'Arrow', 'bdthemes-element-pack' ),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		$this->add_control(
			'logo_tooltip_trigger',
			[ 
				'label'       => __( 'Trigger on Click', 'bdthemes-element-pack' ),
				'description' => __( 'Don\'t set yes when you set lightbox image with marker.', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SWITCHER,
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_content_carousel_settins',
			[ 
				'label' => esc_html__( 'Carousel Settings', 'bdthemes-element-pack' ),
			]
		);

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

		$this->add_control(
			'autoplay_interval',
			[ 
				'label'     => esc_html__( 'Autoplay Interval', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::NUMBER,
				'default'   => 7000,
				'condition' => [ 
					'autoplay' => 'yes',
				],
			]
		);

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

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

		$this->add_control(
			'center_slide',
			[ 
				'label' => esc_html__( 'Center Slide', 'bdthemes-element-pack' ),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_content_navigation',
			[ 
				'label' => __( 'Navigation', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'navigation',
			[ 
				'label'        => __( 'Navigation', 'bdthemes-element-pack' ),
				'type'         => Controls_Manager::SELECT,
				'default'      => 'arrows',
				'options'      => [ 
					'both'   => __( 'Arrows and Dots', 'bdthemes-element-pack' ),
					'arrows' => __( 'Arrows', 'bdthemes-element-pack' ),
					'dots'   => __( 'Dots', 'bdthemes-element-pack' ),
					'none'   => __( 'None', 'bdthemes-element-pack' ),
				],
				'prefix_class' => 'bdt-navigation-type-',
				'render_type'  => 'template',
			]
		);

		$this->add_control(
			'both_position',
			[ 
				'label'     => __( 'Arrows and Dots Position', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'center',
				'options'   => element_pack_navigation_position(),
				'condition' => [ 
					'navigation' => 'both',
				],
			]
		);

		$this->add_control(
			'arrows_position',
			[ 
				'label'     => __( 'Arrows Position', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'center',
				'options'   => element_pack_navigation_position(),
				'condition' => [ 
					'navigation' => 'arrows',
				],
			]
		);

		$this->add_control(
			'dots_position',
			[ 
				'label'     => __( 'Dots Position', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'bottom-center',
				'options'   => element_pack_pagination_position(),
				'condition' => [ 
					'navigation' => 'dots',
				],
			]
		);

		$this->add_control(
			'nav_arrows_icon',
			[ 
				'label'     => esc_html__( 'Arrows Icon', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => '5',
				'options'   => [ 
					'1'        => esc_html__( 'Style 1', 'bdthemes-element-pack' ),
					'2'        => esc_html__( 'Style 2', 'bdthemes-element-pack' ),
					'3'        => esc_html__( 'Style 3', 'bdthemes-element-pack' ),
					'4'        => esc_html__( 'Style 4', 'bdthemes-element-pack' ),
					'5'        => esc_html__( 'Style 5', 'bdthemes-element-pack' ),
					'6'        => esc_html__( 'Style 6', 'bdthemes-element-pack' ),
					'7'        => esc_html__( 'Style 7', 'bdthemes-element-pack' ),
					'8'        => esc_html__( 'Style 8', 'bdthemes-element-pack' ),
					'9'        => esc_html__( 'Style 9', 'bdthemes-element-pack' ),
					'10'       => esc_html__( 'Style 10', 'bdthemes-element-pack' ),
					'11'       => esc_html__( 'Style 11', 'bdthemes-element-pack' ),
					'12'       => esc_html__( 'Style 12', 'bdthemes-element-pack' ),
					'13'       => esc_html__( 'Style 13', 'bdthemes-element-pack' ),
					'14'       => esc_html__( 'Style 14', 'bdthemes-element-pack' ),
					'15'       => esc_html__( 'Style 15', 'bdthemes-element-pack' ),
					'16'       => esc_html__( 'Style 16', 'bdthemes-element-pack' ),
					'17'       => esc_html__( 'Style 17', 'bdthemes-element-pack' ),
					'18'       => esc_html__( 'Style 18', 'bdthemes-element-pack' ),
					'circle-1' => esc_html__( 'Style 19', 'bdthemes-element-pack' ),
					'circle-2' => esc_html__( 'Style 20', 'bdthemes-element-pack' ),
					'circle-3' => esc_html__( 'Style 21', 'bdthemes-element-pack' ),
					'circle-4' => esc_html__( 'Style 22', 'bdthemes-element-pack' ),
					'square-1' => esc_html__( 'Style 23', 'bdthemes-element-pack' ),
				],
				'condition' => [ 
					'navigation' => [ 'both', 'arrows' ],
				],
			]
		);

		$this->add_control(
			'hide_arrow_on_mobile',
			[ 
				'label'     => __( 'Hide Arrow on Mobile', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SWITCHER,
				'condition' => [ 
					'navigation' => [ 'arrows', 'both' ],
				],
			]
		);

		$this->end_controls_section();

		//Style
		$this->start_controls_section(
			'ep_section_style_carousel',
			[ 
				'label' => __( 'Logo Carousel', 'bdthemes-element-pack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->start_controls_tabs( 'ep_image_effects' );

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

		$this->add_control(
			'carousel_bg_color',
			[ 
				'label'     => __( 'Background Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-logo-carousel-figure' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'     => 'item_border',
				'label'    => esc_html__( 'Border', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} .bdt-logo-carousel-figure',
			]
		);

		$this->add_control(
			'item_border_radius',
			[ 
				'label'      => esc_html__( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-logo-carousel-figure' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'padding',
			[ 
				'label'      => __( 'Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-logo-carousel-figure' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'image_opacity',
			[ 
				'label'     => __( 'Opacity', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'max'  => 1,
						'min'  => 0.10,
						'step' => 0.01,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-logo-carousel-figure img' => 'opacity: {{SIZE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[ 
				'name'     => 'image_css_filters',
				'selector' => '{{WRAPPER}} .bdt-logo-carousel-figure img',
			]
		);

		$this->add_responsive_control(
			'image_size',
			[ 
				'label'      => __( 'Image Size', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range'      => [ 
					'px' => [ 
						'min' => 10,
						'max' => 500,
					],
					'%'  => [ 
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-logo-carousel-img' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; object-fit: contain;'
				],
			]
		);

		$this->end_controls_tab();

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

		$this->add_control(
			'carousel_bg_hover_color',
			[ 
				'label'     => __( 'Background Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-logo-carousel-item:hover .bdt-logo-carousel-figure' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'carousel_border_hover_color',
			[ 
				'label'     => __( 'Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-logo-carousel-item:hover .bdt-logo-carousel-figure' => 'border-color: {{VALUE}};',
				],
				'condition' => [ 
					'item_border_border!' => '',
				],
			]
		);

		$this->add_control(
			'image_opacity_hover',
			[ 
				'label'     => __( 'Opacity', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'max'  => 1,
						'min'  => 0.10,
						'step' => 0.01,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-logo-carousel-figure:hover img' => 'opacity: {{SIZE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[ 
				'name'     => 'image_css_filters_hover',
				'selector' => '{{WRAPPER}} .bdt-logo-carousel-figure:hover img',
			]
		);

		$this->add_control(
			'image_bg_hover_transition',
			[ 
				'label'     => __( 'Transition Duration', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'max'  => 3,
						'step' => 0.1,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-logo-carousel-figure:hover img' => 'transition-duration: {{SIZE}}s;',
				],
			]
		);

		$this->add_control(
			'hover_animation',
			[ 
				'label' => __( 'Hover Animation', 'bdthemes-element-pack' ),
				'type'  => Controls_Manager::HOVER_ANIMATION,
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_tooltip',
			[ 
				'label' => esc_html__( 'Tooltip', 'bdthemes-element-pack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'logo_tooltip_width',
			[ 
				'label'       => esc_html__( 'Width', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => [ 
					'px', 'em',
				],
				'range'       => [ 
					'px' => [ 
						'min' => 50,
						'max' => 500,
					],
				],
				'selectors'   => [ 
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"]' => 'width: {{SIZE}}{{UNIT}};',
				],
				'render_type' => 'template',
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'     => 'logo_tooltip_typography',
				'selector' => '.tippy-box[data-theme="bdt-tippy-{{ID}}"]',
			]
		);

		$this->add_control(
			'logo_tooltip_color',
			[ 
				'label'     => esc_html__( 'Text Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"]' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'logo_tooltip_text_align',
			[ 
				'label'     => esc_html__( 'Text Alignment', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::CHOOSE,
				'default'   => 'center',
				'options'   => [ 
					'left'   => [ 
						'title' => esc_html__( 'Left', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [ 
						'title' => esc_html__( 'Center', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right'  => [ 
						'title' => esc_html__( 'Right', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'selectors' => [ 
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"]' => 'text-align: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[ 
				'name'     => 'logo_tooltip_background',
				'selector' => '.tippy-box[data-theme="bdt-tippy-{{ID}}"], .tippy-box[data-theme="bdt-tippy-{{ID}}"] .tippy-backdrop',
			]
		);

		$this->add_control(
			'logo_tooltip_arrow_color',
			[ 
				'label'     => esc_html__( 'Arrow Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"] .tippy-arrow' => 'border-left-color: {{VALUE}}',
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"] .tippy-arrow' => 'border-right-color: {{VALUE}}',
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"] .tippy-arrow' => 'border-top-color: {{VALUE}}',
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"] .tippy-arrow' => 'border-bottom-color: {{VALUE}}',

					'.tippy-box[data-theme="bdt-tippy-{{ID}}"] .tippy-arrow' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_responsive_control(
			'logo_tooltip_padding',
			[ 
				'label'       => __( 'Padding', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::DIMENSIONS,
				'size_units'  => [ 'px', '%' ],
				'selectors'   => [ 
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'render_type' => 'template',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'        => 'logo_tooltip_border',
				'label'       => esc_html__( 'Border', 'bdthemes-element-pack' ),
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '.tippy-box[data-theme="bdt-tippy-{{ID}}"]',
			]
		);

		$this->add_responsive_control(
			'logo_tooltip_border_radius',
			[ 
				'label'      => __( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"]' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'logo_tooltip_box_shadow',
				'selector' => '.tippy-box[data-theme="bdt-tippy-{{ID}}"]',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_navigation',
			[ 
				'label'      => __( 'Navigation', 'bdthemes-element-pack' ),
				'tab'        => Controls_Manager::TAB_STYLE,
				'conditions' => [ 
					'terms' => [ 
						[ 
							'name'     => 'navigation',
							'operator' => '!=',
							'value'    => 'none',
						],
					],
				],
			]
		);

		$this->add_control(
			'arrows_size',
			[ 
				'label'     => __( 'Arrows Size', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 20,
						'max' => 100,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-navigation-prev i,
					{{WRAPPER}} .bdt-navigation-next i' => 'font-size: {{SIZE || 24}}{{UNIT}};',
				],
				'condition' => [ 
					'navigation' => [ 'arrows', 'both' ],
				],
			]
		);

		$this->add_control(
			'arrows_background',
			[ 
				'label'     => __( 'Background Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-navigation-prev,
					{{WRAPPER}} .bdt-navigation-next' => 'background-color: {{VALUE}}',
				],
				'condition' => [ 
					'navigation' => [ 'arrows', 'both' ],
				],
			]
		);

		$this->add_control(
			'arrows_hover_background',
			[ 
				'label'     => __( 'Hover Background Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-navigation-prev:hover,
					{{WRAPPER}} .bdt-navigation-next:hover' => 'background-color: {{VALUE}}',
				],
				'condition' => [ 
					'navigation' => [ 'arrows', 'both' ],
				],
			]
		);

		$this->add_control(
			'arrows_color',
			[ 
				'label'     => __( 'Arrows Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-navigation-prev i,
					{{WRAPPER}} .bdt-navigation-next i' => 'color: {{VALUE}}',
				],
				'condition' => [ 
					'navigation' => [ 'arrows', 'both' ],
				],
			]
		);

		$this->add_control(
			'arrows_hover_color',
			[ 
				'label'     => __( 'Arrows Hover Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-navigation-prev:hover i,
					{{WRAPPER}} .bdt-navigation-next:hover i' => 'color: {{VALUE}}',
				],
				'condition' => [ 
					'navigation' => [ 'arrows', 'both' ],
				],
			]
		);

		$this->add_control(
			'arrows_space',
			[ 
				'label'      => __( 'Space', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'range'      => [ 
					'px' => [ 
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-navigation-prev' => 'margin-right: {{SIZE}}px;',
					'{{WRAPPER}} .bdt-navigation-next' => 'margin-left: {{SIZE}}px;',
				],
				'conditions' => [ 
					'terms' => [ 
						[ 
							'name'  => 'navigation',
							'value' => 'both',
						],
						[ 
							'name'     => 'both_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'      => 'arrows_border',
				'label'     => esc_html__( 'Border', 'bdthemes-element-pack' ),
				'condition' => [ 
					'navigation' => [ 'arrows', 'both' ],
				],
				'selector'  => '{{WRAPPER}} .bdt-navigation-prev,
				{{WRAPPER}} .bdt-navigation-next',
			]
		);

		$this->add_control(
			'arrows_border_hover_color',
			[ 
				'label'     => __( 'Border Hover Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-navigation-prev:hover,
					{{WRAPPER}} .bdt-navigation-next:hover' => 'border-color: {{VALUE}};',
				],
				'condition' => [ 
					'arrows_border_border!' => '',
				],
			]
		);

		$this->add_control(
			'border_radius',
			[ 
				'label'      => __( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-navigation-prev,
					{{WRAPPER}} .bdt-navigation-next' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition'  => [ 
					'navigation' => [ 'arrows', 'both' ],
				],
			]
		);

		$this->add_responsive_control(
			'arrows_padding',
			[ 
				'label'      => esc_html__( 'Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-navigation-prev,
					{{WRAPPER}} .bdt-navigation-next' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'dots_size',
			[ 
				'label'     => __( 'Dots Size', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 5,
						'max' => 20,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-slider-dotnav a' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
				],
				'condition' => [ 
					'navigation' => [ 'dots', 'both' ],
				],
			]
		);

		$this->add_control(
			'dots_color',
			[ 
				'label'     => __( 'Dots Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-slider-dotnav a' => 'background-color: {{VALUE}}',
				],
				'condition' => [ 
					'navigation' => [ 'dots', 'both' ],
				],
			]
		);

		$this->add_control(
			'active_dot_color',
			[ 
				'label'     => __( 'Active Dots Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-slider-dotnav.bdt-active a' => 'background-color: {{VALUE}}',
				],
				'condition' => [ 
					'navigation' => [ 'dots', 'both' ],
				],
			]
		);

		$this->add_responsive_control(
			'arrows_ncx_position',
			[ 
				'label'       => __( 'Horizontal Offset', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SLIDER,
				'default'     => [ 
					'size' => 0,
				],
				'range'       => [ 
					'px' => [ 
						'min' => -200,
						'max' => 200,
					],
				],
				'conditions'  => [ 
					'terms' => [ 
						[ 
							'name'  => 'navigation',
							'value' => 'arrows',
						],
						[ 
							'name'     => 'arrows_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
				'render_type' => 'ui',
				'selectors'   => [ 
					'{{WRAPPER}}' => '--ep-arrows-ncx-h-offset: {{SIZE}}px;'
				],
			]
		);

		$this->add_responsive_control(
			'arrows_ncy_position',
			[ 
				'label'       => __( 'Vertical Offset', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SLIDER,
				'default'     => [ 
					'size' => 40,
				],
				'range'       => [ 
					'px' => [ 
						'min' => -200,
						'max' => 200,
					],
				],
				'conditions'  => [ 
					'terms' => [ 
						[ 
							'name'  => 'navigation',
							'value' => 'arrows',
						],
						[ 
							'name'     => 'arrows_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
				'render_type' => 'ui',
				'selectors'   => [ 
					'{{WRAPPER}}' => '--ep-arrows-ncx-v-offset: {{SIZE}}px;'
				],
			]
		);

		$this->add_responsive_control(
			'arrows_acx_position',
			[ 
				'label'      => __( 'Horizontal Offset', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'default'    => [ 
					'size' => -60,
				],
				'range'      => [ 
					'px' => [ 
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-navigation-prev' => is_rtl() ? 'right: {{SIZE}}px;' : 'left: {{SIZE}}px;',
					'{{WRAPPER}} .bdt-navigation-next' => is_rtl() ? 'left: {{SIZE}}px;' : 'right: {{SIZE}}px;',
				],
				'conditions' => [ 
					'terms' => [ 
						[ 
							'name'  => 'navigation',
							'value' => 'arrows',
						],
						[ 
							'name'  => 'arrows_position',
							'value' => 'center',
						],
					],
				],
			]
		);

		$this->add_responsive_control(
			'dots_nnx_position',
			[ 
				'label'       => __( 'Horizontal Offset', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SLIDER,
				'default'     => [ 
					'size' => 0,
				],
				'range'       => [ 
					'px' => [ 
						'min' => -200,
						'max' => 200,
					],
				],
				'conditions'  => [ 
					'terms' => [ 
						[ 
							'name'  => 'navigation',
							'value' => 'dots',
						],
						[ 
							'name'     => 'dots_position',
							'operator' => '!=',
							'value'    => '',
						],
					],
				],
				'render_type' => 'ui',
				'selectors'   => [ 
					'{{WRAPPER}}' => '--ep-dots-nnx-h-offset: {{SIZE}}px;'
				],
			]
		);

		$this->add_responsive_control(
			'dots_nny_position',
			[ 
				'label'       => __( 'Vertical Offset', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SLIDER,
				'default'     => [ 
					'size' => 30,
				],
				'range'       => [ 
					'px' => [ 
						'min' => -200,
						'max' => 200,
					],
				],
				'conditions'  => [ 
					'terms' => [ 
						[ 
							'name'  => 'navigation',
							'value' => 'dots',
						],
						[ 
							'name'     => 'dots_position',
							'operator' => '!=',
							'value'    => '',
						],
					],
				],
				'render_type' => 'ui',
				'selectors'   => [ 
					'{{WRAPPER}}' => '--ep-dots-nnx-v-offset: {{SIZE}}px;'
				],
			]
		);

		$this->add_responsive_control(
			'both_ncx_position',
			[ 
				'label'       => __( 'Horizontal Offset', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SLIDER,
				'default'     => [ 
					'size' => 0,
				],
				'range'       => [ 
					'px' => [ 
						'min' => -200,
						'max' => 200,
					],
				],
				'conditions'  => [ 
					'terms' => [ 
						[ 
							'name'  => 'navigation',
							'value' => 'both',
						],
						[ 
							'name'     => 'both_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
				'render_type' => 'ui',
				'selectors'   => [ 
					'{{WRAPPER}}' => '--ep-both-h-offset: {{SIZE}}px;'
				],
			]
		);

		$this->add_responsive_control(
			'both_ncy_position',
			[ 
				'label'       => __( 'Vertical Offset', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SLIDER,
				'default'     => [ 
					'size' => 40,
				],
				'range'       => [ 
					'px' => [ 
						'min' => -200,
						'max' => 200,
					],
				],
				'conditions'  => [ 
					'terms' => [ 
						[ 
							'name'  => 'navigation',
							'value' => 'both',
						],
						[ 
							'name'     => 'both_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
				'render_type' => 'ui',
				'selectors'   => [ 
					'{{WRAPPER}}' => '--ep-both-v-offset: {{SIZE}}px;'
				],
			]
		);

		$this->add_responsive_control(
			'both_cx_position',
			[ 
				'label'      => __( 'Arrows Offset', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'default'    => [ 
					'size' => -60,
				],
				'range'      => [ 
					'px' => [ 
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-navigation-prev' => is_rtl() ? 'right: {{SIZE}}px;' : 'left: {{SIZE}}px;',
					'{{WRAPPER}} .bdt-navigation-next' => is_rtl() ? 'left: {{SIZE}}px;' : 'right: {{SIZE}}px;',
				],
				'conditions' => [ 
					'terms' => [ 
						[ 
							'name'  => 'navigation',
							'value' => 'both',
						],
						[ 
							'name'  => 'both_position',
							'value' => 'center',
						],
					],
				],
			]
		);

		$this->add_responsive_control(
			'both_cy_position',
			[ 
				'label'      => __( 'Dots Offset', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'default'    => [ 
					'size' => 30,
				],
				'range'      => [ 
					'px' => [ 
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-dots-container' => 'transform: translateY({{SIZE}}px);',
				],
				'conditions' => [ 
					'terms' => [ 
						[ 
							'name'  => 'navigation',
							'value' => 'both',
						],
						[ 
							'name'  => 'both_position',
							'value' => 'center',
						],
					],
				],
			]
		);

		$this->end_controls_section();

	}

	public function render_header( $settings ) {
		$id = esc_attr( $this->get_id() );

		$this->add_render_attribute( 'logo-carousel', 'id', 'bdt-logo-carousel-' . $id );
		$this->add_render_attribute( 'logo-carousel', 'class', [ 'bdt-logo-carousel-wrapper' ] );
		$this->add_render_attribute( 'logo-carousel', 'data-bdt-grid', '' );
		$this->add_render_attribute( 'logo-carousel', 'class', [ 'bdt-grid', 'bdt-grid-small' ] );

		$columns_mobile = isset( $settings['columns_mobile'] ) ? (int) $settings['columns_mobile'] : 1;
		$columns_tablet = isset( $settings['columns_tablet'] ) ? (int) $settings['columns_tablet'] : 3;
		$columns        = isset( $settings['columns'] ) ? (int) $settings['columns'] : 4;

		$this->add_render_attribute( 'logo-carousel', 'class', 'bdt-slider-items' );
		$this->add_render_attribute( 'logo-carousel', 'class', 'bdt-child-width-1-' . esc_attr( $columns_mobile ) );
		$this->add_render_attribute( 'logo-carousel', 'class', 'bdt-child-width-1-' . esc_attr( $columns_tablet ) . '@s' );
		$this->add_render_attribute( 'logo-carousel', 'class', 'bdt-child-width-1-' . esc_attr( $columns ) . '@m' );

		$navigation = isset( $settings['navigation'] ) ? $settings['navigation'] : 'arrows';
		$navigation_classes = [];
		if ( $navigation === 'both' && isset( $settings['both_position'] ) ) {
			$navigation_classes[] = 'bdt-arrows-dots-align-' . sanitize_html_class( $settings['both_position'] );
		}
		if ( ( $navigation === 'arrows' || $navigation === 'arrows-thumbnavs' ) && isset( $settings['arrows_position'] ) ) {
			$navigation_classes[] = 'bdt-arrows-align-' . sanitize_html_class( $settings['arrows_position'] );
		}
		if ( $navigation === 'dots' && isset( $settings['dots_position'] ) ) {
			$navigation_classes[] = 'bdt-dots-align-' . sanitize_html_class( $settings['dots_position'] );
		}

		$autoplay = ! empty( $settings['autoplay'] ) && $settings['autoplay'] === 'yes';
		$autoplay_interval = isset( $settings['autoplay_interval'] ) ? (int) $settings['autoplay_interval'] : 7000;
		$loop = ! empty( $settings['loop'] ) && $settings['loop'] === 'yes';
		$pause_on_hover = ! empty( $settings['pause_on_hover'] ) && $settings['pause_on_hover'] === 'yes';
		$center_slide = ! empty( $settings['center_slide'] ) && $settings['center_slide'] === 'yes';

		$this->add_render_attribute(
			[
				'slider-settings' => [
					'class'           => array_filter( $navigation_classes ),
					'data-bdt-slider' => [
						wp_json_encode( array_filter( [
							'autoplay'          => $autoplay,
							'autoplay-interval' => $autoplay_interval,
							'finite'            => ! $loop,
							'pause-on-hover'    => $pause_on_hover,
							'center'            => $center_slide,
						] ) ),
					],
				],
			]
		);

		?>
		<div <?php $this->print_render_attribute_string( 'slider-settings' ); ?>>
			<div <?php $this->print_render_attribute_string( 'logo-carousel' ); ?>>
				<?php
	}

	public function render_footer( $settings ) {
		$navigation = isset( $settings['navigation'] ) ? $settings['navigation'] : 'arrows';
		?>
			</div>
			<?php if ( $navigation === 'both' ) : ?>
				<?php $this->render_both_navigation( $settings ); ?>

				<?php if ( isset( $settings['both_position'] ) && $settings['both_position'] === 'center' ) : ?>
					<?php $this->render_dotnavs( $settings ); ?>
				<?php endif; ?>

			<?php elseif ( $navigation === 'arrows' ) : ?>
				<?php $this->render_navigation( $settings ); ?>
			<?php elseif ( $navigation === 'dots' ) : ?>
				<?php $this->render_dotnavs( $settings ); ?>
			<?php endif; ?>
		</div>
		<?php
	}

	public function render_navigation( $settings ) {
		$hide_arrow_on_mobile = ! empty( $settings['hide_arrow_on_mobile'] ) && $settings['hide_arrow_on_mobile'] === 'yes' ? ' bdt-visible@m' : '';
		$navigation = isset( $settings['navigation'] ) ? $settings['navigation'] : 'arrows';
		$both_position = isset( $settings['both_position'] ) ? $settings['both_position'] : '';

		if ( $navigation === 'both' && $both_position === 'center' ) {
			$arrows_position = 'center';
		} else {
			$arrows_position = isset( $settings['arrows_position'] ) ? sanitize_html_class( $settings['arrows_position'] ) : 'center';
		}

		$nav_arrows_icon = isset( $settings['nav_arrows_icon'] ) ? sanitize_html_class( $settings['nav_arrows_icon'] ) : '5';
		?>
		<div class="bdt-position-z-index bdt-position-<?php echo esc_attr( $arrows_position ); ?> <?php echo esc_attr( $hide_arrow_on_mobile ); ?>">
			<div class="bdt-arrows-container bdt-slidenav-container">
				<a href="" class="bdt-navigation-prev bdt-slidenav-previous bdt-icon bdt-slidenav" data-bdt-slider-item="previous">
					<i class="ep-icon-arrow-left-<?php echo esc_attr( $nav_arrows_icon ); ?>" aria-hidden="true"></i>
				</a>
				<a href="" class="bdt-navigation-next bdt-slidenav-next bdt-icon bdt-slidenav" data-bdt-slider-item="next">
					<i class="ep-icon-arrow-right-<?php echo esc_attr( $nav_arrows_icon ); ?>" aria-hidden="true"></i>
				</a>
			</div>
		</div>
		<?php
	}

	public function render_dotnavs( $settings ) {
		$navigation = isset( $settings['navigation'] ) ? $settings['navigation'] : 'arrows';
		$both_position = isset( $settings['both_position'] ) ? $settings['both_position'] : '';

		if ( $navigation === 'both' && $both_position === 'center' ) {
			$dots_position = 'bottom-center';
		} else {
			$dots_position = isset( $settings['dots_position'] ) ? sanitize_html_class( $settings['dots_position'] ) : 'bottom-center';
		}

		$logo_list = isset( $settings['logo_list'] ) ? $settings['logo_list'] : [];
		if ( empty( $logo_list ) ) {
			return;
		}

		?>
		<div class="bdt-position-z-index bdt-visible@m bdt-position-<?php echo esc_attr( $dots_position ); ?>">
			<div class="bdt-dotnav-wrapper bdt-dots-container">
				<ul class="bdt-dotnav bdt-flex-center">
					<?php
					$bdt_counter = 0;
					foreach ( $logo_list as $index => $item ) :
						echo '<li class="bdt-slider-dotnav bdt-active" data-bdt-slider-item="' . esc_attr( $bdt_counter ) . '"><a href="#"></a></li>';
						$bdt_counter++;
					endforeach;
					?>
				</ul>
			</div>
		</div>
		<?php
	}

	public function render_both_navigation( $settings ) {
		$hide_arrow_on_mobile = ! empty( $settings['hide_arrow_on_mobile'] ) && $settings['hide_arrow_on_mobile'] === 'yes' ? 'bdt-visible@m' : '';
		$both_position = isset( $settings['both_position'] ) ? sanitize_html_class( $settings['both_position'] ) : 'center';
		$nav_arrows_icon = isset( $settings['nav_arrows_icon'] ) ? sanitize_html_class( $settings['nav_arrows_icon'] ) : 'arrow-left-1';
		$logo_list = isset( $settings['logo_list'] ) ? $settings['logo_list'] : [];

		?>
		<div class="bdt-position-z-index bdt-position-<?php echo esc_attr( $both_position ); ?>">
			<div class="bdt-arrows-dots-container bdt-slidenav-container">
				<div class="bdt-flex bdt-flex-middle">
					<div class="<?php echo esc_attr( $hide_arrow_on_mobile ); ?>">
						<a href="" class="bdt-navigation-prev bdt-slidenav-previous bdt-icon bdt-slidenav" bdt-slider-item="previous">
							<i class="ep-icon-arrow-left-<?php echo esc_attr( $nav_arrows_icon ); ?>" aria-hidden="true"></i>
						</a>
					</div>

					<?php if ( $both_position !== 'center' && ! empty( $logo_list ) ) : ?>
						<div class="bdt-dotnav-wrapper bdt-dots-container">
							<ul class="bdt-dotnav">
								<?php
								$bdt_counter = 0;
								foreach ( $logo_list as $index => $item ) :
									echo '<li class="bdt-slider-dotnav bdt-active" bdt-slider-item="' . esc_attr( $bdt_counter ) . '"><a href="#"></a></li>';
									$bdt_counter++;
								endforeach;
								?>
							</ul>
						</div>
					<?php endif; ?>

					<div class="<?php echo esc_attr( $hide_arrow_on_mobile ); ?>">
						<a href="" class="bdt-navigation-next bdt-slidenav-next bdt-icon bdt-slidenav" bdt-slider-item="next">
							<i class="ep-icon-arrow-right-<?php echo esc_attr( $nav_arrows_icon ); ?>" aria-hidden="true"></i>
						</a>
					</div>
				</div>
			</div>
		</div>
		<?php
	}

	public function render_loop_item( $settings ) {
		$logo_list = isset( $settings['logo_list'] ) ? $settings['logo_list'] : [];
		if ( empty( $logo_list ) ) {
			return;
		}

		$thumbnail_size = isset( $settings['thumbnail_size'] ) ? $settings['thumbnail_size'] : 'full';
		$hover_animation = isset( $settings['hover_animation'] ) ? sanitize_html_class( $settings['hover_animation'] ) : '';
		$image_mask_popover = ! empty( $settings['image_mask_popover'] ) && $settings['image_mask_popover'] === 'yes';
		$image_mask_class = $image_mask_popover ? ' bdt-image-mask' : '';

		$logo_tooltip_animation = isset( $settings['logo_tooltip_animation'] ) ? sanitize_key( $settings['logo_tooltip_animation'] ) : '';
		$logo_tooltip_x_offset = isset( $settings['logo_tooltip_x_offset']['size'] ) ? (int) $settings['logo_tooltip_x_offset']['size'] : 0;
		$logo_tooltip_y_offset = isset( $settings['logo_tooltip_y_offset']['size'] ) ? (int) $settings['logo_tooltip_y_offset']['size'] : 0;
		$logo_tooltip_arrow = ! empty( $settings['logo_tooltip_arrow'] ) && $settings['logo_tooltip_arrow'] === 'yes';
		$logo_tooltip_trigger = ! empty( $settings['logo_tooltip_trigger'] ) && $settings['logo_tooltip_trigger'] === 'yes';

		foreach ( $logo_list as $index => $item ) :
			$item_image_id = isset( $item['image']['id'] ) ? $item['image']['id'] : 0;
			$item_name = isset( $item['name'] ) ? $item['name'] : '';
			$item_description = isset( $item['description'] ) ? $item['description'] : '';
			$item_logo_tooltip = ! empty( $item['logo_tooltip'] ) && $item['logo_tooltip'] === 'yes';
			$item_link_url = isset( $item['link']['url'] ) ? $item['link']['url'] : '';
			$item_tooltip_placement = isset( $item['logo_tooltip_placement'] ) ? $item['logo_tooltip_placement'] : '';

			$image = $item_image_id ? wp_get_attachment_image_url( $item_image_id, $thumbnail_size ) : false;
			$repeater_key = 'carousel_item' . $index;
			$link_key = 'carousel_item' . $index . '_link';
			$image_alt = esc_html( $item_name ) . ' : ' . esc_html( $item_description );

			$this->add_render_attribute( $repeater_key, 'class', 'bdt-logo-carousel-item' );

			if ( ! empty( $item_link_url ) ) {
				$this->add_render_attribute( $link_key, 'class', 'bdt-logo-carousel-link' );
				$this->add_link_attributes( $link_key, $item['link'] );
			}

			if ( ! empty( $item_name ) && ! empty( $item_description ) && $item_logo_tooltip ) {
				// Tooltip settings
				$tooltip_content = '<div><strong>' . esc_html( $item_name ) . '</strong></div>' . esc_html( $item_description );
				$this->add_render_attribute( $repeater_key, 'data-tippy-content', wp_kses_post( $tooltip_content ), true );

				$this->add_render_attribute( $repeater_key, 'class', 'bdt-tippy-tooltip' );
				$this->add_render_attribute( $repeater_key, 'data-tippy', '', true );

				if ( ! empty( $item_tooltip_placement ) ) {
					$this->add_render_attribute( $repeater_key, 'data-tippy-placement', esc_attr( $item_tooltip_placement ), true );
				}

				if ( ! empty( $logo_tooltip_animation ) ) {
					$this->add_render_attribute( $repeater_key, 'data-tippy-animation', esc_attr( $logo_tooltip_animation ), true );
				}

				if ( $logo_tooltip_x_offset !== 0 || $logo_tooltip_y_offset !== 0 ) {
					$this->add_render_attribute( $repeater_key, 'data-tippy-offset', '[' . esc_js( $logo_tooltip_x_offset ) . ',' . esc_js( $logo_tooltip_y_offset ) . ']', true );
				}

				$this->add_render_attribute( $repeater_key, 'data-tippy-arrow', $logo_tooltip_arrow ? 'true' : 'false', true );

				if ( $logo_tooltip_trigger ) {
					$this->add_render_attribute( $repeater_key, 'data-tippy-trigger', 'click', true );
				}
			}

			$this->add_render_attribute( 'image-wrap', 'class', 'bdt-logo-carousel-figure' . $image_mask_class );

			?>
			<div <?php $this->print_render_attribute_string( $repeater_key ); ?>>
				<figure <?php $this->print_render_attribute_string( 'image-wrap' ); ?>>
					<?php
					if ( $image && $item_image_id ) {
						echo wp_get_attachment_image(
							$item_image_id,
							$thumbnail_size,
							false,
							[
								'class' => 'bdt-logo-carousel-img elementor-animation-' . esc_attr( $hover_animation ),
								'alt'   => esc_attr( $image_alt ),
							]
						);
					} else {
						printf(
							'<img class="bdt-logo-carousel-img elementor-animation-%s" src="%s" alt="%s">',
							esc_attr( $hover_animation ),
							esc_url( BDTEP_ASSETS_URL . 'images/gallery/item-' . ( $index + 1 ) . '.svg' ),
							esc_attr( $image_alt )
						);
					}
					?>
				</figure>

				<?php if ( ! empty( $item_link_url ) ) : ?>
					<a <?php $this->print_render_attribute_string( $link_key ); ?>></a>
				<?php endif; ?>
			</div>
		<?php endforeach; ?>
		<?php
	}

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

		$this->render_header( $settings );
		$this->render_loop_item( $settings );
		$this->render_footer( $settings );
	}

	protected function content_template() {
		?>
		<#
		var navigation = settings.navigation || 'arrows';
		var navArrowsIcon = settings.nav_arrows_icon || '5';
		var logoList = settings.logo_list || [];
		var carouselId = 'bdt-logo-carousel-' + view.getID();

		var columnsMobile = parseInt( settings.columns_mobile, 10 ) || 1;
		var columnsTablet = parseInt( settings.columns_tablet, 10 ) || 3;
		var columnsDesktop = parseInt( settings.columns, 10 ) || 4;
		var carouselClasses = 'bdt-logo-carousel-wrapper bdt-grid bdt-grid-small bdt-slider-items bdt-child-width-1-' + columnsMobile + ' bdt-child-width-1-' + columnsTablet + '@s bdt-child-width-1-' + columnsDesktop + '@m';

		var navOuterClasses = [];
		if ( navigation === 'both' && settings.both_position ) {
			navOuterClasses.push( 'bdt-arrows-dots-align-' + settings.both_position );
		}
		if ( ( navigation === 'arrows' || navigation === 'arrows-thumbnavs' ) && settings.arrows_position ) {
			navOuterClasses.push( 'bdt-arrows-align-' + settings.arrows_position );
		}
		if ( navigation === 'dots' && settings.dots_position ) {
			navOuterClasses.push( 'bdt-dots-align-' + settings.dots_position );
		}
		var sliderOuterClass = navOuterClasses.join( ' ' );

		var autoplay = settings.autoplay === 'yes';
		var autoplayInterval = settings.autoplay_interval ? parseInt( settings.autoplay_interval, 10 ) : 7000;
		var loopYes = settings.loop === 'yes';
		var pauseOnHover = settings.pause_on_hover === 'yes';
		var centerSlide = settings.center_slide === 'yes';
		var sliderData = {
			autoplay: autoplay,
			'autoplay-interval': autoplayInterval,
			finite: ! loopYes,
			'pause-on-hover': pauseOnHover,
			center: centerSlide
		};
		var sliderJson = JSON.stringify( sliderData );

		var hoverAnim = settings.hover_animation || '';
		var imageMask = settings.image_mask_popover === 'yes';

		var logoTooltipAnimation = settings.logo_tooltip_animation || '';
		var logoTooltipX = ( settings.logo_tooltip_x_offset && settings.logo_tooltip_x_offset.size !== undefined ) ? parseInt( settings.logo_tooltip_x_offset.size, 10 ) : 0;
		var logoTooltipY = ( settings.logo_tooltip_y_offset && settings.logo_tooltip_y_offset.size !== undefined ) ? parseInt( settings.logo_tooltip_y_offset.size, 10 ) : 0;
		var logoTooltipArrow = settings.logo_tooltip_arrow === 'yes';
		var logoTooltipTrigger = settings.logo_tooltip_trigger === 'yes';

		var hideArrowMobile = settings.hide_arrow_on_mobile === 'yes' ? ' bdt-visible@m' : '';
		var bothPosition = settings.both_position || 'center';
		var arrowsPosition = ( navigation === 'both' && bothPosition === 'center' ) ? 'center' : ( settings.arrows_position || 'center' );
		var dotsPosition = ( navigation === 'both' && bothPosition === 'center' ) ? 'bottom-center' : ( settings.dots_position || 'bottom-center' );
		var assetsBase = '<?php echo esc_url( BDTEP_ASSETS_URL ); ?>';
		var tippyArrowStr = logoTooltipArrow ? 'true' : 'false';
		#>
		<div class="{{ sliderOuterClass }}" data-bdt-slider='{{{ sliderJson }}}'>
			<div id="{{ carouselId }}" class="{{ carouselClasses }}" data-bdt-grid="">
				<# _.each( logoList, function( item, index ) {
					var itemName = item.name || '';
					var itemDesc = item.description || '';
					var imageAlt = itemName + ' : ' + itemDesc;
					var itemLinkUrl = ( item.link && item.link.url ) ? item.link.url : '';
					var linkTarget = ( item.link && item.link.is_external ) ? '_blank' : '_self';
					var linkRel = '';
					if ( item.link && item.link.is_external ) {
						linkRel = 'noopener noreferrer';
					}
					if ( item.link && item.link.nofollow ) {
						linkRel = linkRel ? linkRel + ' nofollow' : 'nofollow';
					}
					var hasTooltip = itemName && itemDesc && item.logo_tooltip === 'yes';
					var tooltipHtml = '';
					if ( hasTooltip ) {
						tooltipHtml = '<div><strong>' + _.escape( itemName ) + '</strong></div>' + _.escape( itemDesc );
					}
					var imgClass = 'bdt-logo-carousel-img';
					if ( hoverAnim ) {
						imgClass += ' elementor-animation-' + hoverAnim;
					}
					var figureClass = 'bdt-logo-carousel-figure';
					if ( imageMask ) {
						figureClass += ' bdt-image-mask';
					}
					var itemClasses = 'bdt-logo-carousel-item';
					if ( hasTooltip ) {
						itemClasses += ' bdt-tippy-tooltip';
					}
					var imgFallback = assetsBase + 'images/gallery/item-' + ( index + 1 ) + '.svg';
				#>
					<div class="{{ itemClasses }}"<# if ( hasTooltip ) { #> data-tippy="" data-tippy-content="{{{ tooltipHtml }}}"<# if ( item.logo_tooltip_placement ) { #> data-tippy-placement="{{ item.logo_tooltip_placement }}"<# } #><# if ( logoTooltipAnimation ) { #> data-tippy-animation="{{ logoTooltipAnimation }}"<# } #><# if ( logoTooltipX !== 0 || logoTooltipY !== 0 ) { #> data-tippy-offset="[{{ logoTooltipX }},{{ logoTooltipY }}]"<# } #> data-tippy-arrow="{{ tippyArrowStr }}"<# if ( logoTooltipTrigger ) { #> data-tippy-trigger="click"<# } #><# } #>>
						<figure class="{{ figureClass }}">
							<# if ( item.image && item.image.url ) { #>
								<img class="{{ imgClass }}" src="{{ item.image.url }}" alt="{{ imageAlt }}">
							<# } else { #>
								<img class="{{ imgClass }}" src="{{ imgFallback }}" alt="{{ imageAlt }}">
							<# } #>
						</figure>
						<# if ( itemLinkUrl ) { #>
							<a class="bdt-logo-carousel-link" href="{{ itemLinkUrl }}" target="{{ linkTarget }}"<# if ( linkRel ) { #> rel="{{ linkRel }}"<# } #>></a>
						<# } #>
					</div>
				<# } ); #>
			</div>

			<# if ( navigation === 'both' ) { #>
				<div class="bdt-position-z-index bdt-position-{{ bothPosition }}">
					<div class="bdt-arrows-dots-container bdt-slidenav-container">
						<div class="bdt-flex bdt-flex-middle">
							<div class="{{ hideArrowMobile }}">
								<a href="" class="bdt-navigation-prev bdt-slidenav-previous bdt-icon bdt-slidenav" bdt-slider-item="previous">
									<i class="ep-icon-arrow-left-{{ navArrowsIcon }}" aria-hidden="true"></i>
								</a>
							</div>
							<# if ( bothPosition !== 'center' && logoList.length ) { #>
								<div class="bdt-dotnav-wrapper bdt-dots-container">
									<ul class="bdt-dotnav">
										<# _.each( logoList, function( item, dotIndex ) { #>
											<li class="bdt-slider-dotnav bdt-active" bdt-slider-item="{{ dotIndex }}"><a href="#"></a></li>
										<# } ); #>
									</ul>
								</div>
							<# } #>
							<div class="{{ hideArrowMobile }}">
								<a href="" class="bdt-navigation-next bdt-slidenav-next bdt-icon bdt-slidenav" bdt-slider-item="next">
									<i class="ep-icon-arrow-right-{{ navArrowsIcon }}" aria-hidden="true"></i>
								</a>
							</div>
						</div>
					</div>
				</div>
				<# if ( bothPosition === 'center' ) { #>
					<div class="bdt-position-z-index bdt-visible@m bdt-position-{{ dotsPosition }}">
						<div class="bdt-dotnav-wrapper bdt-dots-container">
							<ul class="bdt-dotnav bdt-flex-center">
								<# _.each( logoList, function( item, dotIndex ) { #>
									<li class="bdt-slider-dotnav bdt-active" data-bdt-slider-item="{{ dotIndex }}"><a href="#"></a></li>
								<# } ); #>
							</ul>
						</div>
					</div>
				<# } #>
			<# } else if ( navigation === 'arrows' ) { #>
				<div class="bdt-position-z-index bdt-position-{{ arrowsPosition }}{{ hideArrowMobile }}">
					<div class="bdt-arrows-container bdt-slidenav-container">
						<a href="" class="bdt-navigation-prev bdt-slidenav-previous bdt-icon bdt-slidenav" data-bdt-slider-item="previous">
							<i class="ep-icon-arrow-left-{{ navArrowsIcon }}" aria-hidden="true"></i>
						</a>
						<a href="" class="bdt-navigation-next bdt-slidenav-next bdt-icon bdt-slidenav" data-bdt-slider-item="next">
							<i class="ep-icon-arrow-right-{{ navArrowsIcon }}" aria-hidden="true"></i>
						</a>
					</div>
				</div>
			<# } else if ( navigation === 'dots' ) { #>
				<div class="bdt-position-z-index bdt-visible@m bdt-position-{{ dotsPosition }}">
					<div class="bdt-dotnav-wrapper bdt-dots-container">
						<ul class="bdt-dotnav bdt-flex-center">
							<# _.each( logoList, function( item, dotIndex ) { #>
								<li class="bdt-slider-dotnav bdt-active" data-bdt-slider-item="{{ dotIndex }}"><a href="#"></a></li>
							<# } ); #>
						</ul>
					</div>
				</div>
			<# } #>
		</div>
		<?php
	}
}