<?php
/**
 * Shared base for every slider widget.
 *
 * @package Advance_Elementor_Slider
 */

namespace Advance_Elementor_Slider\Base;

use Advance_Elementor_Slider\Plugin as AELS_Plugin;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Typography;
use Elementor\Icons_Manager;
use Elementor\Widget_Base;

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

/**
 * Holds everything the six widgets have in common: the Swiper behaviour
 * controls, the arrow and pagination controls and styling, the JSON settings
 * handed to the browser, and the outer markup.
 *
 * Subclasses provide their own content controls and their own slide markup.
 */
abstract class Slider_Base extends Widget_Base {

	/**
	 * Panel category.
	 *
	 * @return array
	 */
	public function get_categories() {
		return array( AELS_Plugin::CATEGORY );
	}

	/**
	 * Shared script dependencies.
	 *
	 * @return array
	 */
	public function get_script_depends() {
		return array( 'swiper', 'aels-slider' );
	}

	/**
	 * Shared style dependencies.
	 *
	 * @return array
	 */
	public function get_style_depends() {
		return array( 'e-swiper', 'aels-slider' );
	}

	/* ---------------------------------------------------------------------
	 * Per-widget switches
	 * ------------------------------------------------------------------ */

	/**
	 * Whether the Ken Burns controls are offered.
	 *
	 * @return bool
	 */
	protected function supports_ken_burns() {
		return false;
	}

	/**
	 * Whether the staggered content animation controls are offered.
	 *
	 * Only meaningful for single-slide layouts, where exactly one slide is
	 * active at a time.
	 *
	 * @return bool
	 */
	protected function supports_content_animation() {
		return false;
	}

	/**
	 * Transition effects this widget offers.
	 *
	 * @return array
	 */
	protected function get_effect_options() {
		return array(
			'slide'     => esc_html__( 'Slide', 'advance-elementor-slider' ),
			'coverflow' => esc_html__( 'Coverflow', 'advance-elementor-slider' ),
		);
	}

	/**
	 * Default slides per view, per device.
	 *
	 * @return array
	 */
	protected function default_slides_per_view() {
		return array(
			'desktop' => 3,
			'tablet'  => 2,
			'mobile'  => 1,
		);
	}

	/**
	 * Default gap between slides in px.
	 *
	 * @return int
	 */
	protected function default_space_between() {
		return 24;
	}

	/* ---------------------------------------------------------------------
	 * Shared control sections
	 * ------------------------------------------------------------------ */

	/**
	 * Slider behaviour: effect, per-view, autoplay, loop, input.
	 */
	protected function register_slider_options_section() {
		$effects  = $this->get_effect_options();
		$per_view = $this->default_slides_per_view();

		$this->start_controls_section(
			'aels_section_options',
			array(
				'label' => esc_html__( 'Slider Options', 'advance-elementor-slider' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'effect',
			array(
				'label'   => esc_html__( 'Transition Effect', 'advance-elementor-slider' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'slide',
				'options' => $effects,
			)
		);

		$this->add_responsive_control(
			'slides_per_view',
			array(
				'label'          => esc_html__( 'Slides Per View', 'advance-elementor-slider' ),
				'type'           => Controls_Manager::NUMBER,
				'min'            => 1,
				'max'            => 8,
				'step'           => 1,
				'default'        => $per_view['desktop'],
				'tablet_default' => $per_view['tablet'],
				'mobile_default' => $per_view['mobile'],
				'condition'      => array(
					'effect' => array( 'slide', 'coverflow' ),
				),
			)
		);

		$this->add_responsive_control(
			'space_between',
			array(
				'label'     => esc_html__( 'Space Between (px)', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 120,
				'step'      => 1,
				'default'   => $this->default_space_between(),
				'condition' => array(
					'effect' => array( 'slide', 'coverflow' ),
				),
			)
		);

		$this->add_control(
			'centered_slides',
			array(
				'label'     => esc_html__( 'Center Active Slide', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => '',
				'condition' => array(
					'effect' => array( 'slide', 'coverflow' ),
				),
			)
		);

		$this->add_control(
			'loop',
			array(
				'label'   => esc_html__( 'Infinite Loop', 'advance-elementor-slider' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			)
		);

		$this->add_control(
			'speed',
			array(
				'label'   => esc_html__( 'Transition Speed (ms)', 'advance-elementor-slider' ),
				'type'    => Controls_Manager::NUMBER,
				'min'     => 100,
				'max'     => 5000,
				'step'    => 50,
				'default' => 700,
			)
		);

		$this->add_control(
			'autoplay',
			array(
				'label'     => esc_html__( 'Autoplay', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'yes',
				'separator' => 'before',
			)
		);

		$this->add_control(
			'autoplay_delay',
			array(
				'label'     => esc_html__( 'Autoplay Delay (ms)', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 500,
				'max'       => 20000,
				'step'      => 100,
				'default'   => 5000,
				'condition' => array( 'autoplay' => 'yes' ),
			)
		);

		$this->add_control(
			'pause_on_hover',
			array(
				'label'     => esc_html__( 'Pause On Hover', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'yes',
				'condition' => array( 'autoplay' => 'yes' ),
			)
		);

		$this->add_control(
			'pause_on_interaction',
			array(
				'label'       => esc_html__( 'Stop On Interaction', 'advance-elementor-slider' ),
				'type'        => Controls_Manager::SWITCHER,
				'default'     => '',
				'description' => esc_html__( 'Stop autoplay for good once the visitor swipes or uses an arrow.', 'advance-elementor-slider' ),
				'condition'   => array( 'autoplay' => 'yes' ),
			)
		);

		$this->add_control(
			'grab_cursor',
			array(
				'label'     => esc_html__( 'Grab Cursor', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'yes',
				'separator' => 'before',
			)
		);

		$this->add_control(
			'keyboard',
			array(
				'label'   => esc_html__( 'Keyboard Control', 'advance-elementor-slider' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			)
		);

		$this->add_control(
			'mousewheel',
			array(
				'label'   => esc_html__( 'Mousewheel Control', 'advance-elementor-slider' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => '',
			)
		);

		$this->add_control(
			'free_mode',
			array(
				'label'     => esc_html__( 'Free Mode', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => '',
				'condition' => array( 'effect' => 'slide' ),
			)
		);

		if ( $this->supports_ken_burns() ) {
			$this->register_ken_burns_controls();
		}

		if ( $this->supports_content_animation() ) {
			$this->register_content_animation_controls();
		}

		$this->end_controls_section();
	}

	/**
	 * Ken Burns controls, for widgets with full-bleed slide backgrounds.
	 */
	protected function register_ken_burns_controls() {
		$this->add_control(
			'ken_burns',
			array(
				'label'     => esc_html__( 'Ken Burns Effect', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => '',
				'separator' => 'before',
			)
		);

		$this->add_control(
			'ken_burns_direction',
			array(
				'label'     => esc_html__( 'Zoom Direction', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'in',
				'options'   => array(
					'in'  => esc_html__( 'Zoom In', 'advance-elementor-slider' ),
					'out' => esc_html__( 'Zoom Out', 'advance-elementor-slider' ),
				),
				'condition' => array( 'ken_burns' => 'yes' ),
			)
		);

		$this->add_control(
			'ken_burns_duration',
			array(
				'label'     => esc_html__( 'Zoom Duration (s)', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 3,
						'max'  => 30,
						'step' => 1,
					),
				),
				'default'   => array( 'size' => 12 ),
				'selectors' => array(
					'{{WRAPPER}} .aels-slider' => '--aels-kb-duration: {{SIZE}}s;',
				),
				'condition' => array( 'ken_burns' => 'yes' ),
			)
		);
	}

	/**
	 * Staggered entrance animation controls.
	 */
	protected function register_content_animation_controls() {
		$this->add_control(
			'content_animation',
			array(
				'label'     => esc_html__( 'Content Animation', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'fade-up',
				'separator' => 'before',
				'options'   => array(
					''           => esc_html__( 'None', 'advance-elementor-slider' ),
					'fade-in'    => esc_html__( 'Fade In', 'advance-elementor-slider' ),
					'fade-up'    => esc_html__( 'Fade Up', 'advance-elementor-slider' ),
					'fade-down'  => esc_html__( 'Fade Down', 'advance-elementor-slider' ),
					'fade-left'  => esc_html__( 'Fade Left', 'advance-elementor-slider' ),
					'fade-right' => esc_html__( 'Fade Right', 'advance-elementor-slider' ),
					'zoom-in'    => esc_html__( 'Zoom In', 'advance-elementor-slider' ),
				),
			)
		);

		$this->add_control(
			'content_animation_duration',
			array(
				'label'     => esc_html__( 'Animation Duration (s)', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 0.2,
						'max'  => 3,
						'step' => 0.1,
					),
				),
				'default'   => array( 'size' => 0.8 ),
				'selectors' => array(
					'{{WRAPPER}} .aels-slider' => '--aels-anim-duration: {{SIZE}}s;',
				),
				'condition' => array( 'content_animation!' => '' ),
			)
		);

		$this->add_control(
			'content_animation_stagger',
			array(
				'label'     => esc_html__( 'Stagger Between Items (s)', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 0,
						'max'  => 1,
						'step' => 0.05,
					),
				),
				'default'   => array( 'size' => 0.15 ),
				'selectors' => array(
					'{{WRAPPER}} .aels-slider' => '--aels-anim-stagger: {{SIZE}}s;',
				),
				'condition' => array( 'content_animation!' => '' ),
			)
		);
	}

	/**
	 * Arrow and pagination toggles.
	 */
	protected function register_navigation_section() {
		$this->start_controls_section(
			'aels_section_navigation',
			array(
				'label' => esc_html__( 'Navigation', 'advance-elementor-slider' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'show_arrows',
			array(
				'label'   => esc_html__( 'Arrows', 'advance-elementor-slider' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			)
		);

		$this->add_control(
			'prev_icon',
			array(
				'label'                  => esc_html__( 'Previous Icon', 'advance-elementor-slider' ),
				'type'                   => Controls_Manager::ICONS,
				'skin'                   => 'inline',
				'label_block'            => false,
				'default'                => array(
					'value'   => 'eicon-chevron-left',
					'library' => 'eicons',
				),
				'exclude_inline_options' => array( 'svg' ),
				'condition'              => array( 'show_arrows' => 'yes' ),
			)
		);

		$this->add_control(
			'next_icon',
			array(
				'label'                  => esc_html__( 'Next Icon', 'advance-elementor-slider' ),
				'type'                   => Controls_Manager::ICONS,
				'skin'                   => 'inline',
				'label_block'            => false,
				'default'                => array(
					'value'   => 'eicon-chevron-right',
					'library' => 'eicons',
				),
				'exclude_inline_options' => array( 'svg' ),
				'condition'              => array( 'show_arrows' => 'yes' ),
			)
		);

		$this->add_control(
			'arrows_position',
			array(
				'label'     => esc_html__( 'Arrows Position', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'inside',
				'options'   => array(
					'inside'  => esc_html__( 'Inside', 'advance-elementor-slider' ),
					'outside' => esc_html__( 'Outside', 'advance-elementor-slider' ),
				),
				'condition' => array( 'show_arrows' => 'yes' ),
			)
		);

		$this->add_control(
			'pagination_type',
			array(
				'label'     => esc_html__( 'Pagination', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'bullets',
				'separator' => 'before',
				'options'   => array(
					''            => esc_html__( 'None', 'advance-elementor-slider' ),
					'bullets'     => esc_html__( 'Dots', 'advance-elementor-slider' ),
					'fraction'    => esc_html__( 'Fraction', 'advance-elementor-slider' ),
					'progressbar' => esc_html__( 'Progress Bar', 'advance-elementor-slider' ),
				),
			)
		);

		$this->add_control(
			'pagination_clickable',
			array(
				'label'     => esc_html__( 'Clickable Dots', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'yes',
				'condition' => array( 'pagination_type' => 'bullets' ),
			)
		);

		$this->add_control(
			'dynamic_bullets',
			array(
				'label'     => esc_html__( 'Dynamic Dots', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => '',
				'condition' => array( 'pagination_type' => 'bullets' ),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Arrow styling.
	 */
	protected function register_arrows_style_section() {
		$this->start_controls_section(
			'aels_style_arrows',
			array(
				'label'     => esc_html__( 'Arrows', 'advance-elementor-slider' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array( 'show_arrows' => 'yes' ),
			)
		);

		$this->add_responsive_control(
			'arrow_icon_size',
			array(
				'label'      => esc_html__( 'Icon Size', 'advance-elementor-slider' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 8,
						'max' => 60,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
				'selectors'  => array(
					'{{WRAPPER}} .aels-arrow'     => 'font-size: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .aels-arrow svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'arrow_box_size',
			array(
				'label'      => esc_html__( 'Box Size', 'advance-elementor-slider' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 20,
						'max' => 120,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 48,
				),
				'selectors'  => array(
					'{{WRAPPER}} .aels-arrow' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'arrow_offset_x',
			array(
				'label'      => esc_html__( 'Horizontal Offset', 'advance-elementor-slider' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => -80,
						'max' => 120,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
				'selectors'  => array(
					'{{WRAPPER}} .aels-arrow--prev' => 'left: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .aels-arrow--next' => 'right: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_control(
			'arrow_border_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'advance-elementor-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'default'    => array(
					'top'      => 50,
					'right'    => 50,
					'bottom'   => 50,
					'left'     => 50,
					'unit'     => '%',
					'isLinked' => true,
				),
				'selectors'  => array(
					'{{WRAPPER}} .aels-arrow' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->start_controls_tabs( 'aels_tabs_arrows' );

		$this->start_controls_tab(
			'aels_tab_arrows_normal',
			array( 'label' => esc_html__( 'Normal', 'advance-elementor-slider' ) )
		);

		$this->add_control(
			'arrow_color',
			array(
				'label'     => esc_html__( 'Icon Color', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#ffffff',
				'selectors' => array(
					'{{WRAPPER}} .aels-arrow'     => 'color: {{VALUE}};',
					'{{WRAPPER}} .aels-arrow svg' => 'fill: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'arrow_bg_color',
			array(
				'label'     => esc_html__( 'Background Color', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => 'rgba(0, 0, 0, 0.45)',
				'selectors' => array(
					'{{WRAPPER}} .aels-arrow' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'arrow_border',
				'selector' => '{{WRAPPER}} .aels-arrow',
			)
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'aels_tab_arrows_hover',
			array( 'label' => esc_html__( 'Hover', 'advance-elementor-slider' ) )
		);

		$this->add_control(
			'arrow_color_hover',
			array(
				'label'     => esc_html__( 'Icon Color', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .aels-arrow:hover'     => 'color: {{VALUE}};',
					'{{WRAPPER}} .aels-arrow:hover svg' => 'fill: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'arrow_bg_color_hover',
			array(
				'label'     => esc_html__( 'Background Color', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => 'rgba(0, 0, 0, 0.75)',
				'selectors' => array(
					'{{WRAPPER}} .aels-arrow:hover' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'arrow_border_color_hover',
			array(
				'label'     => esc_html__( 'Border Color', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .aels-arrow:hover' => 'border-color: {{VALUE}};',
				),
			)
		);

		$this->end_controls_tab();
		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	/**
	 * Pagination styling.
	 */
	protected function register_pagination_style_section() {
		$this->start_controls_section(
			'aels_style_pagination',
			array(
				'label'     => esc_html__( 'Pagination', 'advance-elementor-slider' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array( 'pagination_type!' => '' ),
			)
		);

		$this->add_responsive_control(
			'pagination_offset',
			array(
				'label'      => esc_html__( 'Distance From Bottom', 'advance-elementor-slider' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => -60,
						'max' => 120,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
				'selectors'  => array(
					'{{WRAPPER}} .aels-pagination' => 'bottom: {{SIZE}}{{UNIT}};',
				),
				'condition'  => array( 'pagination_type' => array( 'bullets', 'fraction' ) ),
			)
		);

		$this->add_control(
			'bullet_size',
			array(
				'label'      => esc_html__( 'Dot Size', 'advance-elementor-slider' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 4,
						'max' => 30,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 10,
				),
				'selectors'  => array(
					'{{WRAPPER}} .aels-pagination .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				),
				'condition'  => array( 'pagination_type' => 'bullets' ),
			)
		);

		$this->add_control(
			'bullet_gap',
			array(
				'label'      => esc_html__( 'Dot Spacing', 'advance-elementor-slider' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 30,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 6,
				),
				'selectors'  => array(
					'{{WRAPPER}} .aels-pagination' => '--swiper-pagination-bullet-horizontal-gap: {{SIZE}}{{UNIT}};',
				),
				'condition'  => array( 'pagination_type' => 'bullets' ),
			)
		);

		$this->add_control(
			'bullet_color',
			array(
				'label'     => esc_html__( 'Dot Color', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => 'rgba(0, 0, 0, 0.25)',
				'selectors' => array(
					'{{WRAPPER}} .aels-pagination .swiper-pagination-bullet' => 'background: {{VALUE}}; opacity: 1;',
				),
				'condition' => array( 'pagination_type' => 'bullets' ),
			)
		);

		$this->add_control(
			'bullet_active_color',
			array(
				'label'     => esc_html__( 'Active Dot Color', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#2563eb',
				'selectors' => array(
					'{{WRAPPER}} .aels-pagination .swiper-pagination-bullet-active' => 'background: {{VALUE}}; opacity: 1;',
				),
				'condition' => array( 'pagination_type' => 'bullets' ),
			)
		);

		$this->add_control(
			'fraction_color',
			array(
				'label'     => esc_html__( 'Text Color', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#111827',
				'selectors' => array(
					'{{WRAPPER}} .aels-pagination' => 'color: {{VALUE}};',
				),
				'condition' => array( 'pagination_type' => 'fraction' ),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'      => 'fraction_typography',
				'selector'  => '{{WRAPPER}} .aels-pagination',
				'condition' => array( 'pagination_type' => 'fraction' ),
			)
		);

		$this->add_control(
			'progress_color',
			array(
				'label'     => esc_html__( 'Progress Color', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#2563eb',
				'selectors' => array(
					'{{WRAPPER}} .aels-pagination .swiper-pagination-progressbar-fill' => 'background: {{VALUE}};',
				),
				'condition' => array( 'pagination_type' => 'progressbar' ),
			)
		);

		$this->add_control(
			'progress_bg_color',
			array(
				'label'     => esc_html__( 'Progress Track Color', 'advance-elementor-slider' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => 'rgba(0, 0, 0, 0.12)',
				'selectors' => array(
					'{{WRAPPER}} .aels-pagination.swiper-pagination-progressbar' => 'background: {{VALUE}};',
				),
				'condition' => array( 'pagination_type' => 'progressbar' ),
			)
		);

		$this->end_controls_section();
	}

	/* ---------------------------------------------------------------------
	 * Runtime settings
	 * ------------------------------------------------------------------ */

	/**
	 * Build a desktop/tablet/mobile triplet from a responsive number control.
	 *
	 * @param array     $settings Widget settings.
	 * @param string    $key      Control name.
	 * @param int|float $fallback Value used when nothing is set.
	 * @return array
	 */
	protected function get_responsive_number( array $settings, $key, $fallback ) {
		$desktop = ( isset( $settings[ $key ] ) && '' !== $settings[ $key ] ) ? (float) $settings[ $key ] : (float) $fallback;
		$tablet  = ( isset( $settings[ $key . '_tablet' ] ) && '' !== $settings[ $key . '_tablet' ] ) ? (float) $settings[ $key . '_tablet' ] : $desktop;
		$mobile  = ( isset( $settings[ $key . '_mobile' ] ) && '' !== $settings[ $key . '_mobile' ] ) ? (float) $settings[ $key . '_mobile' ] : $tablet;

		return array(
			'desktop' => $desktop,
			'tablet'  => $tablet,
			'mobile'  => $mobile,
		);
	}

	/**
	 * Read a switcher safely.
	 *
	 * @param array  $settings Widget settings.
	 * @param string $key      Control name.
	 * @return bool
	 */
	protected function is_on( array $settings, $key ) {
		return isset( $settings[ $key ] ) && 'yes' === $settings[ $key ];
	}

	/**
	 * Settings handed to the browser as JSON.
	 *
	 * @param array $settings Widget settings.
	 * @param array $extra    Widget-specific additions.
	 * @return array
	 */
	protected function get_slider_settings( array $settings, array $extra = array() ) {
		$per_view = $this->default_slides_per_view();

		$base = array(
			'effect'              => isset( $settings['effect'] ) ? $settings['effect'] : 'slide',
			'speed'               => isset( $settings['speed'] ) ? absint( $settings['speed'] ) : 700,
			'loop'                => $this->is_on( $settings, 'loop' ),
			'grabCursor'          => $this->is_on( $settings, 'grab_cursor' ),
			'keyboard'            => $this->is_on( $settings, 'keyboard' ),
			'mousewheel'          => $this->is_on( $settings, 'mousewheel' ),
			'freeMode'            => $this->is_on( $settings, 'free_mode' ),
			'centeredSlides'      => $this->is_on( $settings, 'centered_slides' ),
			'autoplay'            => $this->is_on( $settings, 'autoplay' ),
			'autoplayDelay'       => isset( $settings['autoplay_delay'] ) ? absint( $settings['autoplay_delay'] ) : 5000,
			'pauseOnHover'        => $this->is_on( $settings, 'pause_on_hover' ),
			'stopOnInteraction'   => $this->is_on( $settings, 'pause_on_interaction' ),
			'slidesPerView'       => $this->get_responsive_number( $settings, 'slides_per_view', $per_view['desktop'] ),
			'spaceBetween'        => $this->get_responsive_number( $settings, 'space_between', $this->default_space_between() ),
			'arrows'              => $this->is_on( $settings, 'show_arrows' ),
			'pagination'          => isset( $settings['pagination_type'] ) ? $settings['pagination_type'] : '',
			'paginationClickable' => $this->is_on( $settings, 'pagination_clickable' ),
			'dynamicBullets'      => $this->is_on( $settings, 'dynamic_bullets' ),
			'contentAnimation'    => isset( $settings['content_animation'] ) ? $settings['content_animation'] : '',
		);

		return array_merge( $base, $extra );
	}

	/* ---------------------------------------------------------------------
	 * Shared markup
	 * ------------------------------------------------------------------ */

	/**
	 * Open the slider wrapper and the swiper-wrapper.
	 *
	 * @param array $settings       Widget settings.
	 * @param array $extra_classes  Extra classes for the root element.
	 * @param array $extra_settings Extra JSON settings.
	 */
	protected function render_slider_start( array $settings, array $extra_classes = array(), array $extra_settings = array() ) {
		$effect  = isset( $settings['effect'] ) ? $settings['effect'] : 'slide';
		$classes = array_merge(
			array( 'aels-slider', 'aels-slider--effect-' . sanitize_html_class( $effect ) ),
			$extra_classes
		);

		if ( $this->is_on( $settings, 'ken_burns' ) ) {
			$direction = isset( $settings['ken_burns_direction'] ) ? $settings['ken_burns_direction'] : 'in';
			$classes[] = 'aels-slider--ken-burns';
			$classes[] = 'aels-slider--kb-' . sanitize_html_class( $direction );
		}

		if ( ! empty( $settings['content_animation'] ) ) {
			$classes[] = 'aels-slider--anim-' . sanitize_html_class( $settings['content_animation'] );
		}

		if ( $this->is_on( $settings, 'show_arrows' ) && ! empty( $settings['arrows_position'] ) ) {
			$classes[] = 'aels-slider--arrows-' . sanitize_html_class( $settings['arrows_position'] );
		}

		$this->add_render_attribute(
			'aels-wrapper',
			array(
				'class'         => $classes,
				'data-settings' => wp_json_encode( $this->get_slider_settings( $settings, $extra_settings ) ),
			)
		);
		?>
		<div <?php $this->print_render_attribute_string( 'aels-wrapper' ); ?>>
			<div class="swiper aels-swiper">
				<div class="swiper-wrapper">
		<?php
	}

	/**
	 * Close the swiper-wrapper and print the navigation.
	 *
	 * @param array $settings Widget settings.
	 */
	protected function render_slider_end( array $settings ) {
		?>
				</div>
			</div>
			<?php
			$this->render_arrows( $settings );
			$this->render_pagination( $settings );
			?>
		</div>
		<?php
	}

	/**
	 * Print the arrow buttons.
	 *
	 * @param array $settings Widget settings.
	 */
	protected function render_arrows( array $settings ) {
		if ( ! $this->is_on( $settings, 'show_arrows' ) ) {
			return;
		}
		?>
		<button type="button" class="aels-arrow aels-arrow--prev" aria-label="<?php echo esc_attr__( 'Previous slide', 'advance-elementor-slider' ); ?>">
			<?php Icons_Manager::render_icon( $settings['prev_icon'], array( 'aria-hidden' => 'true' ) ); ?>
		</button>
		<button type="button" class="aels-arrow aels-arrow--next" aria-label="<?php echo esc_attr__( 'Next slide', 'advance-elementor-slider' ); ?>">
			<?php Icons_Manager::render_icon( $settings['next_icon'], array( 'aria-hidden' => 'true' ) ); ?>
		</button>
		<?php
	}

	/**
	 * Print the pagination container.
	 *
	 * @param array $settings Widget settings.
	 */
	protected function render_pagination( array $settings ) {
		if ( empty( $settings['pagination_type'] ) ) {
			return;
		}
		?>
		<div class="aels-pagination aels-pagination--<?php echo esc_attr( $settings['pagination_type'] ); ?>"></div>
		<?php
	}

	/**
	 * Print an empty-state message in the editor only.
	 *
	 * @param string $message Message to show.
	 */
	protected function render_empty_notice( $message ) {
		if ( ! \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
			return;
		}
		?>
		<div class="aels-empty"><?php echo esc_html( $message ); ?></div>
		<?php
	}
}