<?php

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Icons_Manager;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;

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

class WAFDAE_Dokan_Vendors_Slider extends Widget_Base
{

	public function __construct($data = [], $args = null)
	{
		parent::__construct($data, $args);
		wp_register_script('dokan-swiper-sliders-js', plugins_url('lib/swiper/swiper-bundle.min.js', __DIR__), ['elementor-frontend'], '1.0.0', true);
		wp_register_script('dokan-sliders', plugins_url('assets/js/dokan-sliders.js', __DIR__), ['elementor-frontend'], '1.0.0', true);
		wp_register_style('dokan-swiper-sliders-css', plugins_url('lib/swiper/swiper-bundle.min.css', __DIR__), '1.0.0');
		wp_register_style('dokan-vendors-slider', plugin_dir_url(__DIR__) . 'assets/css/dokan-slider.css', '1.0.0');

	}

	public function get_script_depends()
	{
		return ['dokan-swiper-sliders-js', 'dokan-sliders'];
	}

	public function get_style_depends()
	{
		return ['dokan-swiper-sliders-css', 'dokan-widgets'];
	}

	public function get_name()
	{
		return 'dokan-vendors-slider';
	}

	public function get_title()
	{
		return __('Dokan Vendors Slider', 'wpsaad-addons-for-dokan-and-elementor');
	}

	public function get_icon()
	{
		return 'eicon-post-slider';
	}

	public function get_categories()
	{
		return ['wpsaad'];
	}

	public function get_keywords()
	{
		return ['visual', 'carousel', 'slider', 'vendors', 'dokan'];
	}

	protected function register_controls()
	{
		$this->start_controls_section(
			'section_items_carousel',
			[
				'label' => esc_html__('Items Carousel', 'wpsaad-addons-for-dokan-and-elementor'),
			]
		);

		$this->add_control(
			'number_of_vendors',
			[
				'label' => __('Number of Vendors', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::NUMBER,
				'default' => 5,
				'min' => 1,
				'max' => 50,
			]
		);

		$slides_to_show = range(1, 10);
		$slides_to_show = array_combine($slides_to_show, $slides_to_show);

		$this->add_responsive_control(
			'slides_to_show',
			[
				'label' => esc_html__('Slides to Show', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'' => esc_html__('Default', 'wpsaad-addons-for-dokan-and-elementor'),
				] + $slides_to_show,
				'frontend_available' => true,
				'render_type' => 'template',
				'selectors' => [
					'{{WRAPPER}}' => '--e-image-carousel-slides-to-show: {{VALUE}}',
				],
				'content_classes' => 'elementor-control-field-select-small',
			]
		);

		$this->add_responsive_control(
			'slides_to_scroll',
			[
				'label' => esc_html__('Slides to Scroll', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SELECT,
				'description' => esc_html__('Set how many slides are scrolled per swipe.', 'wpsaad-addons-for-dokan-and-elementor'),
				'options' => [
					'' => esc_html__('Default', 'wpsaad-addons-for-dokan-and-elementor'),
				] + $slides_to_show,
				'condition' => [
					'slides_to_show!' => '1',
				],
				'frontend_available' => true,
				'content_classes' => 'elementor-control-field-select-small',
			]
		);

		$this->add_control(
			'image_stretch',
			[
				'label' => esc_html__('Image Stretch', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SELECT,
				'default' => 'no',
				'options' => [
					'no' => esc_html__('No', 'wpsaad-addons-for-dokan-and-elementor'),
					'yes' => esc_html__('Yes', 'wpsaad-addons-for-dokan-and-elementor'),
				],
			]
		);

		$this->add_control(
			'navigation',
			[
				'label' => esc_html__('Navigation', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SELECT,
				'default' => 'both',
				'options' => [
					'both' => esc_html__('Arrows and Dots', 'wpsaad-addons-for-dokan-and-elementor'),
					'arrows' => esc_html__('Arrows', 'wpsaad-addons-for-dokan-and-elementor'),
					'dots' => esc_html__('Dots', 'wpsaad-addons-for-dokan-and-elementor'),
					'none' => esc_html__('None', 'wpsaad-addons-for-dokan-and-elementor'),
				],
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'navigation_previous_icon',
			[
				'label' => esc_html__('Previous Arrow Icon', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::ICONS,
				'fa4compatibility' => 'icon',
				'skin' => 'inline',
				'label_block' => false,
				'skin_settings' => [
					'inline' => [
						'none' => [
							'label' => 'Default',
							'icon' => 'eicon-chevron-left',
						],
						'icon' => [
							'icon' => 'eicon-star',
						],
					],
				],
				'recommended' => [
					'fa-regular' => [
						'arrow-alt-circle-left',
						'caret-square-left',
					],
					'fa-solid' => [
						'angle-double-left',
						'angle-left',
						'arrow-alt-circle-left',
						'arrow-circle-left',
						'arrow-left',
						'caret-left',
						'caret-square-left',
						'chevron-circle-left',
						'chevron-left',
						'long-arrow-alt-left',
					],
				],
				'conditions' => [
					'relation' => 'or',
					'terms' => [
						[
							'name' => 'navigation',
							'operator' => '=',
							'value' => 'both',
						],
						[
							'name' => 'navigation',
							'operator' => '=',
							'value' => 'arrows',
						],
					],
				],
			]
		);

		$this->add_control(
			'navigation_next_icon',
			[
				'label' => esc_html__('Next Arrow Icon', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::ICONS,
				'fa4compatibility' => 'icon',
				'skin' => 'inline',
				'label_block' => false,
				'skin_settings' => [
					'inline' => [
						'none' => [
							'label' => 'Default',
							'icon' => 'eicon-chevron-right',
						],
						'icon' => [
							'icon' => 'eicon-star',
						],
					],
				],
				'recommended' => [
					'fa-regular' => [
						'arrow-alt-circle-right',
						'caret-square-right',
					],
					'fa-solid' => [
						'angle-double-right',
						'angle-right',
						'arrow-alt-circle-right',
						'arrow-circle-right',
						'arrow-right',
						'caret-right',
						'caret-square-right',
						'chevron-circle-right',
						'chevron-right',
						'long-arrow-alt-right',
					],
				],
				'conditions' => [
					'relation' => 'or',
					'terms' => [
						[
							'name' => 'navigation',
							'operator' => '=',
							'value' => 'both',
						],
						[
							'name' => 'navigation',
							'operator' => '=',
							'value' => 'arrows',
						],
					],
				],
			]
		);

		$this->add_control(
			'link_to',
			[
				'label' => esc_html__('Link', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SELECT,
				'default' => 'none',
				'options' => [
					'none' => esc_html__('None', 'wpsaad-addons-for-dokan-and-elementor'),
					'file' => esc_html__('Media File', 'wpsaad-addons-for-dokan-and-elementor'),
					'custom' => esc_html__('Custom URL', 'wpsaad-addons-for-dokan-and-elementor'),
				],
			]
		);

		$this->add_control(
			'link',
			[
				'label' => esc_html__('Link', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::URL,
				'condition' => [
					'link_to' => 'custom',
				],
				'show_label' => false,
				'dynamic' => [
					'active' => true,
				],
			]
		);

		$this->add_control(
			'open_lightbox',
			[
				'label' => esc_html__('Lightbox', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SELECT,
				'description' => sprintf(
					/* translators: 1: Link open tag, 2: Link close tag. */
					esc_html__('Manage your site’s lightbox settings in the %1$sLightbox panel%2$s.', 'wpsaad-addons-for-dokan-and-elementor'),
					'<a href="javascript: $e.run( \'panel/global/open\' ).then( () => $e.route( \'panel/global/settings-lightbox\' ) )">',
					'</a>'
				),
				'default' => 'default',
				'options' => [
					'default' => esc_html__('Default', 'wpsaad-addons-for-dokan-and-elementor'),
					'yes' => esc_html__('Yes', 'wpsaad-addons-for-dokan-and-elementor'),
					'no' => esc_html__('No', 'wpsaad-addons-for-dokan-and-elementor'),
				],
				'condition' => [
					'link_to' => 'file',
				],
			]
		);

		$this->add_control(
			'caption_type',
			[
				'label' => esc_html__('Caption', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SELECT,
				'default' => '',
				'options' => [
					'' => esc_html__('None', 'wpsaad-addons-for-dokan-and-elementor'),
					'title' => esc_html__('Title', 'wpsaad-addons-for-dokan-and-elementor'),
					'caption' => esc_html__('Caption', 'wpsaad-addons-for-dokan-and-elementor'),
					'description' => esc_html__('Description', 'wpsaad-addons-for-dokan-and-elementor'),
				],
			]
		);
		if (is_plugin_active('dokan-pro/dokan-pro.php')) {
			$this->add_control(
				'show_rating',
				[
					'label' => esc_html__('Rating', 'wpsaad-addons-for-dokan-and-elementor'),
					'type' => Controls_Manager::SWITCHER,
					'frontend_available' => true,
					'default' => 'yes',
				]
			);
		}

		$this->add_control(
			'show_social',
			[
				'label' => esc_html__('Social', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SWITCHER,
				'frontend_available' => true,
				'default' => 'yes',
			]
		);


		$this->end_controls_section();

		$this->start_controls_section(
			'section_slider_options',
			[
				'label' => esc_html__('Slider Options', 'wpsaad-addons-for-dokan-and-elementor'),
			]
		);
		$this->add_responsive_control(
			'items_space_bettween',
			[
				'label' => esc_html__('Space Bettween', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
						'max' => 100,
				],
				'default' => [
					'size' => 20,
				],

				'frontend_available' => true,

			]
		);

		$this->add_control(
			'lazyload',
			[
				'label' => esc_html__('Lazyload', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SWITCHER,
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'autoplay',
			[
				'label' => esc_html__('Autoplay', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__('Yes', 'wpsaad-addons-for-dokan-and-elementor'),
				'label_off' => esc_html__('No', 'wpsaad-addons-for-dokan-and-elementor'),
				'return_value' => 'yes',
				'default' => 'yes',
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'pause_on_hover',
			[
				'label' => esc_html__('Pause on Hover', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__('Yes', 'wpsaad-addons-for-dokan-and-elementor'),
				'label_off' => esc_html__('No', 'wpsaad-addons-for-dokan-and-elementor'),
				'return_value' => 'yes',
				'default' => 'yes',
				'condition' => [
					'autoplay' => 'yes',
				],
				'render_type' => 'none',
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'pause_on_interaction',
			[
				'label' => esc_html__('Pause on Interaction', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__('Yes', 'wpsaad-addons-for-dokan-and-elementor'),
				'label_off' => esc_html__('No', 'wpsaad-addons-for-dokan-and-elementor'),
				'return_value' => 'yes',
				'default' => 'yes',
				'condition' => [
					'autoplay' => 'yes',
				],
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'autoplay_speed',
			[
				'label' => esc_html__('Autoplay Speed', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::NUMBER,
				'default' => 5000,
				'condition' => [
					'autoplay' => 'yes',
				],
				'render_type' => 'none',
				'frontend_available' => true,
			]
		);

		// Loop requires a re-render so no 'render_type = none'
		$this->add_control(
			'infinite',
			[
				'label' => esc_html__('Infinite Loop', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__('Yes', 'wpsaad-addons-for-dokan-and-elementor'),
				'label_off' => esc_html__('No', 'wpsaad-addons-for-dokan-and-elementor'),
				'return_value' => 'yes',
				'default' => 'yes',
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'effect',
			[
				'label' => esc_html__('Effect', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SELECT,
				'default' => 'slide',
				'options' => [
					'slide' => esc_html__('Slide', 'wpsaad-addons-for-dokan-and-elementor'),
					'fade' => esc_html__('Fade', 'wpsaad-addons-for-dokan-and-elementor'),
				],
				'condition' => [
					'slides_to_show' => '1',
				],
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'speed',
			[
				'label' => esc_html__('Animation Speed', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::NUMBER,
				'default' => 500,
				'render_type' => 'none',
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'direction',
			[
				'label' => esc_html__('Direction', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SELECT,
				'default' => 'ltr',
				'options' => [
					'ltr' => esc_html__('Left', 'wpsaad-addons-for-dokan-and-elementor'),
					'rtl' => esc_html__('Right', 'wpsaad-addons-for-dokan-and-elementor'),
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_navigation',
			[
				'label' => esc_html__('Navigation', 'wpsaad-addons-for-dokan-and-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'navigation' => ['arrows', 'dots', 'both'],
				],
			]
		);

		$this->add_control(
			'heading_style_arrows',
			[
				'label' => esc_html__('Arrows', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'navigation' => ['arrows', 'both'],
				],
			]
		);

		$this->add_control(
			'arrows_position',
			[
				'label' => esc_html__('Position', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SELECT,
				'default' => 'inside',
				'options' => [
					'inside' => esc_html__('Inside', 'wpsaad-addons-for-dokan-and-elementor'),
					'outside' => esc_html__('Outside', 'wpsaad-addons-for-dokan-and-elementor'),
				],
				'prefix_class' => 'elementor-arrows-position-',
				'condition' => [
					'navigation' => ['arrows', 'both'],
				],
			]
		);

		$this->add_responsive_control(
			'arrows_size',
			[
				'label' => esc_html__('Size', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em', 'rem', 'custom'],
				'range' => [
					'px' => [
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .dokan-swiper-button.dokan-swiper-button-prev, {{WRAPPER}} .dokan-swiper-button.dokan-swiper-button-next' => 'font-size: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'navigation' => ['arrows', 'both'],
				],
			]
		);

		$this->add_control(
			'arrows_color',
			[
				'label' => esc_html__('Color', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .dokan-swiper-button.dokan-swiper-button-prev, {{WRAPPER}} .dokan-swiper-button.dokan-swiper-button-next' => 'color: {{VALUE}};',
					'{{WRAPPER}} .dokan-swiper-button.dokan-swiper-button-prev svg, {{WRAPPER}} .dokan-swiper-button.dokan-swiper-button-next svg' => 'fill: {{VALUE}};',
				],
				'condition' => [
					'navigation' => ['arrows', 'both'],
				],
			]
		);

		$this->add_control(
			'heading_style_dots',
			[
				'label' => esc_html__('Pagination', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'navigation' => ['dots', 'both'],
				],
			]
		);

		$this->add_control(
			'dots_position',
			[
				'label' => esc_html__('Position', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SELECT,
				'default' => 'outside',
				'options' => [
					'outside' => esc_html__('Outside', 'wpsaad-addons-for-dokan-and-elementor'),
					'inside' => esc_html__('Inside', 'wpsaad-addons-for-dokan-and-elementor'),
				],
				'prefix_class' => 'elementor-pagination-position-',
				'condition' => [
					'navigation' => ['dots', 'both'],
				],
			]
		);

		$this->add_responsive_control(
			'dots_size',
			[
				'label' => esc_html__('Size', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em', 'rem', 'custom'],
				'range' => [
					'px' => [
						'max' => 20,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'navigation' => ['dots', 'both'],
				],
			]
		);

		$this->add_control(
			'dots_inactive_color',
			[
				'label' => esc_html__('Color', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					// The opacity property will override the default inactive dot color which is opacity 0.2.
					'{{WRAPPER}} .swiper-pagination-bullet:not(.swiper-pagination-bullet-active)' => 'background: {{VALUE}}; opacity: 1',
				],
				'condition' => [
					'navigation' => ['dots', 'both'],
				],
			]
		);

		$this->add_control(
			'dots_color',
			[
				'label' => esc_html__('Active Color', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .swiper-pagination-bullet' => 'background: {{VALUE}};',
				],
				'condition' => [
					'navigation' => ['dots', 'both'],
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_item',
			[
				'label' => esc_html__('Item', 'wpsaad-addons-for-dokan-and-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'item_Title_color',
			[
				'label' => esc_html__('Title Color', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					// The opacity property will override the default inactive dot color which is opacity 0.2.
					'{{WRAPPER}} .dokan-vendors-slider .swiper-wrapper .dokan-vendor .vendor-name' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'item_social_color',
			[
				'label' => esc_html__('Social Color', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					// The opacity property will override the default inactive dot color which is opacity 0.2.
					'{{WRAPPER}} .dokan-vendors-slider .swiper-wrapper .dokan-vendor .vendor-social-links a' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'item_bg_color',
			[
				'label' => esc_html__('Background Color', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					// The opacity property will override the default inactive dot color which is opacity 0.2.
					'{{WRAPPER}} .dokan-vendors-slider .swiper-wrapper .dokan-vendor' => 'background: {{VALUE}};',
				],
			]
		);


		$this->add_control(
			'items_spacing',
			[
				'label' => esc_html__('Spacing', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'' => esc_html__('Default', 'wpsaad-addons-for-dokan-and-elementor'),
					'custom' => esc_html__('Custom', 'wpsaad-addons-for-dokan-and-elementor'),
				],
				'default' => '',
				'condition' => [
					'slides_to_show!' => '1',
				],
			]
		);

		$this->add_responsive_control(
			'items_spacing_custom',
			[
				'label' => esc_html__('Items Spacing', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em', 'rem', 'custom'],
				'range' => [
					'px' => [
						'max' => 100,
					],
				],
				'default' => [
					'size' => 20,
				],
				'condition' => [
					'items_spacing' => 'custom',
					'slides_to_show!' => '1',
				],
				'frontend_available' => true,
				'render_type' => 'none',
				'separator' => 'after',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'item_border',
				'selector' => '{{WRAPPER}} .dokan-vendors-slider .swiper-wrapper .dokan-vendor',
			]
		);

		$this->add_responsive_control(
			'item_border_radius',
			[
				'label' => esc_html__('Border Radius', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em', 'rem', 'custom'],
				'selectors' => [
					'{{WRAPPER}} .dokan-vendors-slider .swiper-wrapper .dokan-vendor' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'item_box_shadow',
				'exclude' => [
					'box_shadow_position',
				],
				'selector' => '{{WRAPPER}} .dokan-vendors-slider .swiper-wrapper .dokan-vendor',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_image',
			[
				'label' => esc_html__('Image', 'wpsaad-addons-for-dokan-and-elementor'),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'width',
			[
				'label' => esc_html__('Width', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
				],
				'tablet_default' => [
					'unit' => '%',
				],
				'mobile_default' => [
					'unit' => '%',
				],
				'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
				'range' => [
					'%' => [
						'min' => 1,
						'max' => 100,
					],
					'px' => [
						'min' => 1,
						'max' => 1000,
					],
					'vw' => [
						'min' => 1,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .dokan-vendors-slider .swiper-wrapper .dokan-vendor img' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'space',
			[
				'label' => esc_html__('Max Width', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
				],
				'tablet_default' => [
					'unit' => '%',
				],
				'mobile_default' => [
					'unit' => '%',
				],
				'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
				'range' => [
					'%' => [
						'min' => 1,
						'max' => 100,
					],
					'px' => [
						'min' => 1,
						'max' => 1000,
					],
					'vw' => [
						'min' => 1,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .dokan-vendors-slider .swiper-wrapper .dokan-vendor img' => 'max-width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'height',
			[
				'label' => esc_html__('Height', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', '%', 'em', 'rem', 'vh', 'custom'],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 500,
					],
					'vh' => [
						'min' => 1,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .dokan-vendors-slider .swiper-wrapper .dokan-vendor img' => 'height: {{SIZE}}{{UNIT}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'image_border',
				'selector' => '{{WRAPPER}} .dokan-vendors-slider .swiper-wrapper .dokan-vendor img',
				'separator' => 'before',
			]
		);

		$this->add_responsive_control(
			'image_border_radius',
			[
				'label' => esc_html__('Border Radius', 'wpsaad-addons-for-dokan-and-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em', 'rem', 'custom'],
				'selectors' => [
					'{{WRAPPER}} .dokan-vendors-slider .swiper-wrapper .dokan-vendor img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'image_box_shadow',
				'exclude' => [
					'box_shadow_position',
				],
				'selector' => '{{WRAPPER}} .dokan-vendors-slider .swiper-wrapper .dokan-vendor img',
			]
		);

		$this->end_controls_section();
	}

	protected function render()
	{
		$settings = $this->get_settings_for_display();
		$number_of_vendors = $settings['number_of_vendors'];
		$lazyload = 'yes' === $settings['lazyload'];
				if (is_plugin_active('dokan-pro/dokan-pro.php')) {
							$show_rating = 'yes' === $settings['show_rating'];
				}
		$show_social = 'yes' === $settings['show_social'];

		// Slider settings
		$has_autoplay_enabled = 'yes' === $this->get_settings_for_display('autoplay');
		$autoplay_speed = $settings['autoplay_speed'];
		$slides_to_show = $settings['slides_to_show'];
		$slides_to_scroll = $settings['slides_to_scroll'];
		$show_dots = (in_array($settings['navigation'], ['dots', 'both']));
		$show_arrows = (in_array($settings['navigation'], ['arrows', 'both']));
		$direction = $settings['direction'];

		echo '<div class="dokan-vendors-slider swiper"
                data-autoplay="' . esc_attr($has_autoplay_enabled) . '"
                data-autoplay-speed="' . esc_attr($autoplay_speed) . '"
                data-slides-to-show="' . esc_attr($slides_to_show) . '"
                data-slides-to-scroll="' . esc_attr($slides_to_scroll) . '"
                dir="' . esc_attr($direction) . '"
                data-show-nav="' . esc_attr($show_arrows) . '"   
                data-show-dots="' . esc_attr($show_dots) . '">';

		// Fetch Dokan vendors.
		$args = array(
			'number' => $number_of_vendors,
		);
		$vendors = dokan()->vendor->all($args);

		echo ' <div class="swiper-wrapper">';
		if (! empty($vendors)) {
			foreach ($vendors as $vendor) {

				$store_info = dokan_get_store_info($vendor->get_id());
				$store_name = $store_info['store_name'];
				$store_url = dokan_get_store_url($vendor->get_id());
				$profile_image = get_avatar_url($vendor->get_id());
				$social_links = isset($store_info['social']) ? $store_info['social'] : [];

				echo '<div class="dokan-vendor swiper-slide">';
				echo '<a href="' . esc_url($store_url) . '">';
				if ($lazyload) {
					echo '<img class="vendor-image swiper-lazy"  data-src="' . esc_url($profile_image) . '" alt="' . esc_attr($store_name) . '">';
				} else {
					echo '<img class="vendor-image"  src="' . esc_url($profile_image) . '" alt="' . esc_attr($store_name) . '">';
				}

				echo '<h4 class="vendor-name">' . esc_html($store_name) . '</h4>';
				echo '</a>';

				// Display vendor rating

				if (is_plugin_active('dokan-pro/dokan-pro.php') && $show_rating) {
					if (dokan_get_seller_rating($vendor->get_id())["count"] > 0) {
						$store_rating = dokan_get_seller_rating($vendor->get_id());
						if ($store_rating['rating'] > 0) {
							echo '<div class="starwrapper" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">';
							echo '<span class="star-rating" title="' . esc_html(sprintf(__('Rated %s out of 5', 'wpsaad-addons-for-dokan-and-elementor'),esc_html($store_rating['rating']) ))  . '"><span style="width:' . esc_html(($store_rating['rating'] * 16))  . 'px"><span itemprop="ratingValue" class="rating">' . esc_html($store_rating['rating']) . '</span> </span></span>';
							echo '</div>';
						}
					} else {
						echo '<div class="starwrapper" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">';
						echo '<span class="star-rating" title="' . esc_html(sprintf(__('Rated %s out of 5', 'wpsaad-addons-for-dokan-and-elementor'), 0) ). '"><span style="width:' . (0 * 16) . 'px"><span itemprop="ratingValue" class="rating">0</span> </span></span>';
						echo '</div>';
					}
				}
				if ($show_social) {
					// Display social icons
					if (!empty($social_links['fb'])) {
						$social_links['facebook-square'] = $social_links['fb'];
						unset($social_links['fb']);
					}
					echo '<div class="vendor-social-links">';
					if (! empty($social_links)) {
						foreach ($social_links as $key => $url) {
							if (! empty($url)) {
								echo '<a href="' . esc_url($url) . '" target="_blank" class="social-link social-' . esc_attr($key) . '">';
								echo '<i class="fab fa-' . esc_attr($key) . '"></i>'; // Font Awesome icon
								echo '</a>';
							}
						}
					}
					echo '</div>';
				}


				echo '</div>'; // End vendor div

			}
		}
		echo '</div><!-- End swiper-wrapper -->'; // End of wrapper div

		$slides_count = count($vendors);

		if (1 < $slides_count) :
			if ($show_arrows) :
				echo '<div class="dokan-swiper-button dokan-swiper-button-prev" role="button" tabindex="0">';
				$this->render_swiper_button('previous');
				echo '</div>';
				echo '<div class="dokan-swiper-button dokan-swiper-button-next" role="button" tabindex="0">';
				$this->render_swiper_button('next');
				echo '</div>';
			endif;

			if ($show_dots) {
				echo '<div class="swiper-pagination"></div>';
			}

		endif;


		echo '</div>'; // End of slider div



	}

	private function render_swiper_button($type)
	{
		$direction = 'next' === $type ? 'right' : 'left';
		$icon_settings = $this->get_settings_for_display('navigation_' . $type . '_icon');

		if (empty($icon_settings['value'])) {
			$icon_settings = [
				'library' => 'eicons',
				'value' => 'eicon-chevron-' . $direction,
			];
		}

		Icons_Manager::render_icon($icon_settings, ['aria-hidden' => 'true']);
	}
}
