<?php

namespace Elementor;

include get_template_directory() . '/elementor/' . 'contracts.php';


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


class JiawazImageSlider extends Widget_Base
{

    public function get_name()
    {
        return 'banta_image_slider';
    }

    public function get_title()
    {
        return __('Jiawaz Image Slider', TEXT_DOMAIN);
    }

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

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

    public function get_keywords()
    {
        return ['card', 'box', 'list', 'carousel', 'slider', 'image'];
    }

    protected function _register_controls()
    {
        $this->register_content_tab_carousel_content();
        $this->register_content_tab_carousel_controls();
        $this->register_style_tab_image_controls();
        $this->register_style_tab_carousel_controls();
    }

    protected function register_content_tab_carousel_content()
    {
        $this->start_controls_section(
            'section_items',
            [
                'label' => esc_html__('content', TEXT_DOMAIN),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );



        $repeater = new Repeater();

        $repeater->add_control(
            'image',
            [
                'label' => esc_html__('Choose Image', TEXT_DOMAIN),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => esc_url(get_template_directory_uri() . '/images/default_slide.jpg'),
                ],
            ]
        );

        $repeater->add_control(
            'image_mobile',
            [
                'label' => esc_html__('Choose Mobile Image', TEXT_DOMAIN),
                'type' => Controls_Manager::MEDIA,
            ]
        );

        $repeater->add_control(
            'link',
            [
                'label' => esc_html__('Link', TEXT_DOMAIN),
                'type' => \Elementor\Controls_Manager::URL,
                'placeholder' => esc_html__('https://your-link.com', TEXT_DOMAIN),
            ]
        );

        $this->add_control(
            'items',
            [
                'label' => esc_html__('Items', TEXT_DOMAIN),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [
                    [
                        'title' => esc_html__('First item title', TEXT_DOMAIN),
                        'title_tag' => 'span',
                        'link' => '',
                    ],
                    [
                        'title' => esc_html__('Second item title', TEXT_DOMAIN),
                        'title_tag' => 'span',
                        'link' => '',
                    ],
                ],
            ]
        );

        $this->end_controls_section();

    }

    protected function register_content_tab_carousel_controls()
    {
        $this->start_controls_section(
            'section_swiper',
            [
                'label' => esc_html__('carousel', TEXT_DOMAIN),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );


        $this->add_control(
            'carousel_effect',
            [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__('effect', TEXT_DOMAIN),
                'options' => [
                    'none' => [
                        'title' => esc_html__('none', TEXT_DOMAIN),
                    ],
                    'slide' => [
                        'title' => esc_html__('slide', TEXT_DOMAIN),
                    ],
                    'fade' => [
                        'title' => esc_html__('fade', TEXT_DOMAIN),
                    ],
                    'cube' => [
                        'title' => esc_html__('cube', TEXT_DOMAIN),
                    ],
                    'coverflow' => [
                        'title' => esc_html__('coverflow', TEXT_DOMAIN),
                    ],
                    'flip' => [
                        'title' => esc_html__('flip', TEXT_DOMAIN),
                    ],
                    'cards' => [
                        'title' => esc_html__('cards', TEXT_DOMAIN),
                    ]
                ],
                'default' => 'slide',
            ]
        );


        // items
        $this->add_control(
            'carousel_items_heading',
            [
                'label' => esc_html__('items count', TEXT_DOMAIN),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',

            ]
        );
        $this->add_control(
            'carousel_items',
            [
                'label' => esc_html__('desktop', TEXT_DOMAIN),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 1,
                'placeholder' => esc_html__('enter the number', TEXT_DOMAIN),

            ]
        );
        $this->add_control(
            'carousel_items_tablet',
            [
                'label' => esc_html__('tablet', TEXT_DOMAIN),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 1,
                'placeholder' => esc_html__('enter the number', TEXT_DOMAIN),

            ]
        );
        $this->add_control(
            'carousel_items_mobile',
            [
                'label' => esc_html__('mobile', TEXT_DOMAIN),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 1,
                'placeholder' => esc_html__('enter the number', TEXT_DOMAIN),

            ]
        );

        $this->add_control(
            'carousel_autoplay',
            [
                'label' => esc_html__('autoplay', TEXT_DOMAIN),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('active', TEXT_DOMAIN),
                'label_off' => esc_html__('off', TEXT_DOMAIN),
                'return_value' => 'yes',
                'default' => 'yes',
                'separator' => 'before',

            ]
        );

        $this->add_control(
            'carousel_smart_speed',
            [
                'label' => __('animation speed', TEXT_DOMAIN),
                'type' => Controls_Manager::NUMBER,
                'default' => 800,

            ]
        );

        $this->add_control(
            'carousel_autoplay_delay',
            [
                'label' => __('animation delay', TEXT_DOMAIN),
                'type' => Controls_Manager::NUMBER,
                'default' => 4000,
                'condition' => [
                    'carousel_autoplay' => 'yes'
                ]

            ]
        );

        $this->add_control(
            'carousel_center',
            [
                'label' => esc_html__('center mode', TEXT_DOMAIN),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => esc_html__('active', TEXT_DOMAIN),
                'label_off' => esc_html__('off', TEXT_DOMAIN),
                'return_value' => 'yes',
                'default' => 'yes',

            ]
        );

        $this->add_control(
            'carousel_loop',
            [
                'label' => esc_html__('infinite loop', TEXT_DOMAIN),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => esc_html__('active', TEXT_DOMAIN),
                'label_off' => esc_html__('off', TEXT_DOMAIN),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'carousel_margin',
            [
                'label' => esc_html__('items margin', TEXT_DOMAIN),
                'type' => Controls_Manager::NUMBER,
                'default' => 16,
                'placeholder' => esc_html__('enter the value', TEXT_DOMAIN),

            ]
        );

        // nav
        $this->add_control(
            'carousel_nav_heading',
            [
                'label' => esc_html__('arrows', TEXT_DOMAIN),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',

            ]
        );
        $this->add_control(
            'carousel_nav_hover',
            [
                'label' => esc_html__('show on hover', TEXT_DOMAIN),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => esc_html__('show', TEXT_DOMAIN),
                'label_off' => esc_html__('hide', TEXT_DOMAIN),
                'return_value' => 'yes',
                'default' => 'false',
            ]
        );

        $this->add_control(
            'carousel_nav',
            [
                'label' => esc_html__('show', TEXT_DOMAIN),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => esc_html__('show', TEXT_DOMAIN),
                'label_off' => esc_html__('hide', TEXT_DOMAIN),
                'return_value' => 'yes',
                'default' => 'yes',

            ]
        );

        // dots
        $this->add_control(
            'carousel_dots_heading',
            [
                'label' => esc_html__('dots', TEXT_DOMAIN),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',

            ]
        );
        $this->add_control(
            'carousel_dots',
            [
                'label' => esc_html__('show', TEXT_DOMAIN),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => esc_html__('show', TEXT_DOMAIN),
                'label_off' => esc_html__('hide', TEXT_DOMAIN),
                'return_value' => 'yes',
                'default' => 'yes',

            ]
        );

        $this->end_controls_section();
    }

    protected function register_style_tab_image_controls()
    {
        $this->start_controls_section(
            'section_slide_style',
            [
                'label' => esc_html__('image', TEXT_DOMAIN),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );


        $this->add_responsive_control(
            'image_radius',
            [
                'label' => __('border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', 'rem'],
                'selectors' => [
                    '{{WRAPPER}} .swiper-slide img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'image_border_type',
                'label' => esc_html__('border', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .swiper-slide img',
            ]
        );

        $this->end_controls_section();
    }


    // style carousel
    protected function register_style_tab_carousel_controls()
    {
        $this->start_controls_section(
            'section_carousel_style',
            [
                'label' => esc_html__('Carousel', TEXT_DOMAIN),
                'tab' => Controls_Manager::TAB_STYLE,

            ]
        );

        // nav
        $this->add_control(
            'carousel_nav_style_heading',
            [
                'label' => esc_html__('arrows', TEXT_DOMAIN),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->add_responsive_control(
            'carousel_arrow_size',
            [
                'label' => __('icon size', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .custom-swiper-button-next,{{WRAPPER}} .custom-swiper-button-prev' => 'font-size: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );

        $this->add_responsive_control(
            'carousel_nav_margin_between',
            [
                'label' => __('space between', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .image-swiper-buttons' => 'gap: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );

        $this->start_controls_tabs(
            'carousel_nav_style_tabs', [
                'separator' => 'before'
            ]
        );

        // nav normal tab
        $this->start_controls_tab(
            'carousel_nav_style_normal_tab',
            [
                'label' => esc_html__('normal', TEXT_DOMAIN),
            ]
        );
        $this->add_control(
            'carousel_nav_icon_color',
            [
                'label' => esc_html__('Icon color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .custom-swiper-button-next,{{WRAPPER}} .custom-swiper-button-prev' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'carousel_nav_bg_color',
            [
                'label' => esc_html__('background color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .custom-swiper-button-prev,{{WRAPPER}} .custom-swiper-button-next' => 'background-color: {{VALUE}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'carousel_nav_border_type',
                'label' => esc_html__('border', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .custom-swiper-button-prev.swiper-button-primary,{{WRAPPER}} .custom-swiper-button-next.swiper-button-primary',
            ]
        );
        $this->add_responsive_control(
            'carousel_nav_border_radius',
            [
                'label' => esc_html__('border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .custom-swiper-button-prev,{{WRAPPER}} .custom-swiper-button-next' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'carousel_nav_shadow',
                'selector' => '{{WRAPPER}} .custom-swiper-button-prev,{{WRAPPER}} .custom-swiper-button-next',
            ]
        );
        $this->end_controls_tab();

        // nav hover tab
        $this->start_controls_tab(
            'carousel_nav_style_hover_tab',
            [
                'label' => esc_html__('hover', TEXT_DOMAIN),
            ]
        );
        $this->add_control(
            'carousel_nav_icon_color_hover',
            [
                'label' => esc_html__('Icon color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .custom-swiper-button-prev:hover,{{WRAPPER}} .custom-swiper-button-next:hover' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'carousel_nav_bg_color_hover',
            [
                'label' => esc_html__('background color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .custom-swiper-button-prev:hover,{{WRAPPER}} .custom-swiper-button-next:hover' => 'background-color: {{VALUE}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'carousel_nav_border_type_hover',
                'label' => esc_html__('border', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .custom-swiper-button-prev.swiper-button-primary:hover,{{WRAPPER}} .custom-swiper-button-next.swiper-button-primary:hover',
            ]
        );
        $this->add_responsive_control(
            'carousel_nav_border_radius_hover',
            [
                'label' => esc_html__('border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .custom-swiper-button-prev:hover,{{WRAPPER}} .custom-swiper-button-next:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'carousel_nav_shadow_hover',
                'selector' => '{{WRAPPER}} .custom-swiper-button-prev:hover,{{WRAPPER}} .custom-swiper-button-next:hover',
            ]
        );
        $this->end_controls_tab();
        $this->end_controls_tabs();



        // dots
        $this->add_control(
            'carousel_dots_style_heading',
            [
                'label' => esc_html__('dots', TEXT_DOMAIN),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before'
            ]
        );
        $this->add_control(
            'carousel_dots_alignment',
            [
                'type' =>Controls_Manager::SELECT2,
                'label' => esc_html__('alignment', TEXT_DOMAIN),
                'options' => [
                    'pagination-position-bottom-left' => esc_html__('bottom left', TEXT_DOMAIN),
                    'pagination-position-bottom-right' => esc_html__('bottom right', TEXT_DOMAIN),
                    'pagination-position-bottom-center' => esc_html__('bottom center', TEXT_DOMAIN),
                    'pagination-position-top-left' => esc_html__('top left', TEXT_DOMAIN),
                    'pagination-position-top-right' => esc_html__('top right', TEXT_DOMAIN),
                    'pagination-position-top-center' => esc_html__('top center', TEXT_DOMAIN),
                ],
                'default' => 'pagination-position-bottom-left',
            ]
        );
        $this->add_responsive_control(
            'carousel_dots_margin',
            [
                'label' => __('space between', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet' => 'margin: 0 {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );


        $this->add_control(
            'dots_bg_color',
            [
                'label' => esc_html__('background color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .custom-swiper-pagination' => 'background-color: {{VALUE}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'dots_bg_border_type',
                'label' => esc_html__('border', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .custom-swiper-pagination',
            ]
        );
        $this->add_responsive_control(
            'dots_bg_border_radius',
            [
                'label' => esc_html__('border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .custom-swiper-pagination' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'dots_bg_shadow',
                'selector' => '{{WRAPPER}} .custom-swiper-pagination',
            ]
        );


        $this->start_controls_tabs(
            'carousel_dots_style_tabs', [
                'separator' => 'before'
            ]
        );

        // dots normal tab
        $this->start_controls_tab(
            'carousel_dots_style_normal_tab',
            [
                'label' => esc_html__('normal', TEXT_DOMAIN),
            ]
        );
        $this->add_responsive_control(
            'carousel_dots_width',
            [
                'label' => __('width', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_responsive_control(
            'carousel_dots_height',
            [
                'label' => __('height', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet' => 'height: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_control(
            'carousel_dots_color',
            [
                'label' => esc_html__('color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet' => 'background-color: {{VALUE}}!important;',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'carousel_dots_border_type',
                'label' => esc_html__('border', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .swiper-pagination-bullet',
            ]
        );
        $this->add_responsive_control(
            'carousel_dots_border_radius',
            [
                'label' => esc_html__('border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'carousel_dots_shadow',
                'selector' => '{{WRAPPER}} .swiper-pagination-bullet',
            ]
        );
        $this->end_controls_tab();

        // dots hover tab
        $this->start_controls_tab(
            'carousel_dots_style_hover_tab',
            [
                'label' => esc_html__('hover', TEXT_DOMAIN),
            ]
        );
        $this->add_responsive_control(
            'carousel_dots_width_hover',
            [
                'label' => __('width', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet:hover' => 'width: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_responsive_control(
            'carousel_dots_height_hover',
            [
                'label' => __('height', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet:hover' => 'height: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_control(
            'carousel_dots_color_hover',
            [
                'label' => esc_html__('color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet:hover' => 'background-color: {{VALUE}}!important;',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'carousel_dots_border_type_hover',
                'label' => esc_html__('border', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .swiper-pagination-bullet:hover',
            ]
        );
        $this->add_responsive_control(
            'carousel_dots_border_radius_hover',
            [
                'label' => esc_html__('border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'carousel_dots_shadow_hover',
                'selector' => '{{WRAPPER}} .swiper-pagination-bullet:hover',
            ]
        );
        $this->end_controls_tab();

        // dots active tab
        $this->start_controls_tab(
            'carousel_dots_style_active_tab',
            [
                'label' => esc_html__('active', TEXT_DOMAIN),
            ]
        );
        $this->add_responsive_control(
            'carousel_dots_width_active',
            [
                'label' => __('width', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active' => 'width: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_responsive_control(
            'carousel_dots_height_active',
            [
                'label' => __('height', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active' => 'height: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_control(
            'carousel_dots_color_active',
            [
                'label' => esc_html__('color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active' => 'background-color: {{VALUE}}!important;',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'carousel_dots_border_type_active',
                'label' => esc_html__('border', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active',
            ]
        );
        $this->add_responsive_control(
            'carousel_dots_border_radius_active',
            [
                'label' => esc_html__('border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'carousel_dots_shadow_active',
                'selector' => '{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active',
            ]
        );
        $this->end_controls_tab();
        $this->end_controls_tabs();


        $this->end_controls_section();
    }

    protected function render()
    {

        $settings = $this->get_settings_for_display();

        // carousel
        $carouselEffect = $settings['carousel_effect'];
        $items = $settings['carousel_items'];
        $itemsTablet = $settings['carousel_items_tablet'];
        $itemsMobile = $settings['carousel_items_mobile'];
        $autoplay = $settings['carousel_autoplay'];
        $autoplayDelay = $settings['carousel_autoplay_delay'];
        $center = $settings['carousel_center'];
        $loop = $settings['carousel_loop'];
        $margin = $settings['carousel_margin'];
        $dots = $settings['carousel_dots'];
        $dotsAlignment = $settings['carousel_dots_alignment'];
        $smartSpeed = $settings['carousel_smart_speed'];
        $nav = $settings['carousel_nav'];
        $navHover = $settings['carousel_nav_hover'] === 'yes';
        $classes = $navHover ? 'swiper-navigation-hover' : '';

        echo "<div class='elementor-swiper $classes swiper-before-init swiper banner-swiper swiper-navigation-bottom-right' swiper-effect='" . $carouselEffect . "' swiper-items='" . $items . "' swiper-items-tablet='" . $itemsTablet . "' swiper-items-mobile='" . $itemsMobile . "' swiper-autoplay='" . $autoplay . "' swiper-autoplay-delay='" . $autoplayDelay . "' swiper-speed='" . $smartSpeed . "' swiper-dots='" . $dots . "' swiper-nav='" . $nav . "' swiper-center='" . $center . "' swiper-loop='" . $loop . "' swiper-margin='" . $margin . "'>";
        echo "<div class='swiper-wrapper'>";
        foreach ($settings['items'] as $index => $item ) :
            $repeater_setting_key = $this->get_repeater_setting_key( 'text', 'items', $index );
            $itemLinkAttr = "";?>
            <?php if (!empty($item['link']['url'])) {
                $this->add_link_attributes("link_{$index}", $item['link']);
                $itemLinkAttr = $this->get_render_attribute_string("link_{$index}");
            }
            $bannerClasses = empty($item['image_mobile']['url']) ? '' : 'd-none' ;
            $mobileImageUrl = empty($item['image_mobile']['url']) ? $item['image']['url'] : $item['image_mobile']['url'] ;
            ?>
            <div class="swiper-slide">
                <a <?php echo $itemLinkAttr ?> class="banner-slide">
                    <?php echo "<img data-mobile-image='" . $mobileImageUrl . "' data-original-image='" . $item['image']['url'] . "' class='banner-image $bannerClasses' alt='slide' src='" . $item['image']['url'] . "'/>"; ?>
                </a>
            </div>
        <?php endforeach; ?>
        <?php
        echo "</div>";
        if($dots === 'yes'){
            echo "<div class='custom-swiper-pagination $dotsAlignment'></div>";
        }

        if($nav === 'yes') {
            echo "<div class='image-swiper-buttons'>";
            echo "<div class='custom-swiper-button-prev'><i class='iconly-Arrow-Right'></i></div>";
            echo "<div class='custom-swiper-button-next'><i class='iconly-Arrow-Left'></i></div>";
            echo "</div>";
        }

        echo "<div class='swiper-spinner'></div>";

        echo "</div>";
    }


}

Plugin::instance()->widgets_manager->register_widget_type(new JiawazImageSlider());