<?php

namespace PEZESHKYAR\CORE;

class PZY_SWIPER extends \Elementor\Widget_Base
{
    protected $items;

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

    public function get_title()
    {
        return esc_html__('اسلایدر پایه ', 'pezeshkyar-core');
    }

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

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

    public function get_keywords()
    {
        return ['pzy', 'slider'];
    }

    public function get_script_depends()
    {
        return ["swiper.js"];
    }

    public function get_style_depends()
    {
        return ['swiper.css'];
    }

    protected function slider_breakpoint_settings($settings)
    {
        $output = [
            'slidesPerView' => $settings['slides_per_view'] ?? 1,
            'spaceBetween' => $settings['space_between'] ?? 0,
            'loop' => $settings['loop_slider'] == 'yes',
        ];

        $output['navigation'] = [
            "nextEl" => '.swiper-button-next',
            "prevEl" => '.swiper-button-prev',
            "enabled" => isset($settings['navigation']) && $settings['navigation'] == 'yes'
        ];

        $output['pagination'] = [
            "el" => ".swiper-pagination",
            'type' => $settings['pagination_type'],
            "enabled" => isset($settings['pagination']) && $settings['pagination'] == 'yes',
        ];

        if(isset($settings['autoplay'])){
            $delay = $this->get_settings_for_display('slider_delay')??6000;
            $output['autoplay']= ($settings['autoplay']=='yes')?array('delay'=>$delay):false;
        }


        if (is_rtl()) {
            $output['rtl'] = true;
        }

        return $output;
    }

    protected function slider_settings()
    {
        $slides_per_view = 'auto';
        if($this->get_settings_for_display('customize_slides_per_view') == 'yes'){
            $slides_per_view = $this->get_settings_for_display('slides_per_view');
        }
        $slider_settings = $this->slider_breakpoint_settings([
            'slides_per_view' => $slides_per_view,
            'space_between' => $this->get_settings_for_display('space_between'),
            'navigation' => $this->get_settings_for_display('navigation'),
            'pagination' => $this->get_settings_for_display('pagination'),
            'pagination_type' => $this->get_settings_for_display('pagination_type'),
            'loop_slider' => $this->get_settings_for_display('loop_slider'),
            'autoplay' => $this->get_settings_for_display('autoplay')
        ]);


        if ($breakpoints_settings = $this->get_settings_for_display('breakpoints')) {
            $breakpoints = [];
            foreach ($breakpoints_settings as $breakpoint) {
                if (isset($breakpoint['width'])) {
                    $slides_per_view = 'auto';
                    if($breakpoint['customize_slides_per_view'] == 'yes'){
                        $slides_per_view = $breakpoint['slides_per_view'];
                    }
                    $breakpoint['slides_per_view'] = $slides_per_view;
                    unset($breakpoint['customize_slides_per_view']);
                    $slider_breakpoint_settings = $this->slider_breakpoint_settings($breakpoint);
                    $breakpoints[$breakpoint['width']] = $slider_breakpoint_settings;
                }
            }
            $slider_settings['breakpoints'] = $breakpoints;
        }

        return $slider_settings;
    }

    protected function register_slider_setting_ontrols()
    {
        $this->start_controls_section(
            'slider_settings',
            [
                'label' => esc_html__('تنظیمات اسلایدر', 'pezeshkyar'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'customize_slides_per_view',
            [
                'label' => esc_html__('تعداد اسلاید سفارشی سازی شود؟', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('بله', 'pezeshkyar'),
                'label_off' => esc_html__('خیر', 'pezeshkyar'),
                'return_value' => 'yes',
                'default' => 'yes',
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'slides_per_view',
            [
                'label' => esc_html__('چند اسلاید نشان داده شود؟', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 0,
                'step' => 1,
                'default' => 4,
                'frontend_available' => true,
                'condition' => [
                      'customize_slides_per_view'=>'yes'
                ]
            ],

        );

        $this->add_control(
            'space_between',
            [
                'label' => esc_html__('فاصله بین اسلایدها', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 0,
                'step' => 1,
                'default' => 16,
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'navigation',
            [
                'label' => esc_html__('دکمه های پیمایش نشان داده شود؟', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('بله', 'pezeshkyar'),
                'label_off' => esc_html__('خیر', 'pezeshkyar'),
                'return_value' => 'yes',
                'default' => 'yes',
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'pagination',
            [
                'label' => esc_html__('صفحه بندی نشان داده شود؟', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('بله', 'pezeshkyar'),
                'label_off' => esc_html__('خیر', 'pezeshkyar'),
                'return_value' => 'yes',
                'default' => 'no',
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'pagination_type',
            [
                'label' => esc_html__('نوع صفحه بندی', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'bullets',
                'options' => [
                    'bullets' => esc_html__('گلوله', 'pezeshkyar'),
                    'progressbar' => esc_html__('نوار پیشرفت', 'pezeshkyar'),
                ],
                'condition' => [
                    'pagination' => 'yes'
                ]
            ]
        );
        $this->add_control(
            'loop_slider',
            [
                'label' => esc_html__('پیوسته تکرار شود؟', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('بله', 'pezeshkyar'),
                'label_off' => esc_html__('خیر', 'pezeshkyar'),
                'return_value' => 'yes',
                'default' => 'no',
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'autoplay',
            [
                'label' => esc_html__('پخش خودکار فعال شود؟', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('بله', 'pezeshkyar'),
                'label_off' => esc_html__('خیر', 'pezeshkyar'),
                'return_value' => 'yes',
                'default' => 'no',
                'frontend_available' => true,
            ]
        );
        $this->add_control(
			'slider_delay',
			[
				'label' => esc_html__( 'فاصله زمانی بین اسلایدها', 'pezeshkyar' ),
				'type' => \Elementor\Controls_Manager::NUMBER,
				'min' => 100,
				'step' => 100,
				'default' => 6000,
                'condition' => [
                    'autoplay' => 'yes',
                ],
			]
		);
        // slider_delay

        $breakpoints = new \Elementor\Repeater();
        $breakpoints->add_control('width', [
            'label' => esc_html__('عرض نقطه شکست', 'pezeshkyar'),
            'type' => \Elementor\Controls_Manager::NUMBER,
            'default' => 1024,
        ]);
        $breakpoints->add_control(
            'customize_slides_per_view',
            [
                'label' => esc_html__('تعداد اسلاید سفارشی سازی شود؟', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('بله', 'pezeshkyar'),
                'label_off' => esc_html__('خیر', 'pezeshkyar'),
                'return_value' => 'yes',
                'default' => 'yes',
                'frontend_available' => true,
            ]
        );
        $breakpoints->add_control('slides_per_view', [
            'label' => esc_html__('چند اسلاید نشان داده شود؟', 'pezeshkyar'),
            'type' => \Elementor\Controls_Manager::NUMBER,
            'min' => 0,
            'step' => 1,
            'default' => 4,
            'frontend_available' => true,
            'condition' => [
                'customize_slides_per_view'=>'yes'
            ]
        ]);
        $breakpoints->add_control('space_between', [
            'label' => esc_html__('فاصله بین اسلایدها', 'pezeshkyar'),
            'type' => \Elementor\Controls_Manager::NUMBER,
            'min' => 0,
            'step' => 1,
            'default' => 16,
            'frontend_available' => true,
        ]);
        $breakpoints->add_control('navigation', [
            'name' => 'navigation',
            'label' => esc_html__('دکمه های پیمایش نشان داده شود؟', 'pezeshkyar'),
            'type' => \Elementor\Controls_Manager::SWITCHER,
            'label_on' => esc_html__('بله', 'pezeshkyar'),
            'label_off' => esc_html__('خیر', 'pezeshkyar'),
            'return_value' => 'yes',
            'default' => 'yes',
            'frontend_available' => true,
        ]);
        $breakpoints->add_control('pagination', [
            'label' => esc_html__('صفحه بندی نشان داده شود؟', 'pezeshkyar'),
            'type' => \Elementor\Controls_Manager::SWITCHER,
            'label_on' => esc_html__('بله', 'pezeshkyar'),
            'label_off' => esc_html__('خیر', 'pezeshkyar'),
            'return_value' => 'yes',
            'default' => 'no',
            'frontend_available' => true,
        ]);
        $breakpoints->add_control('pagination_type', [
            'label' => esc_html__('نوع صفحه بندی', 'pezeshkyar'),
            'type' => \Elementor\Controls_Manager::SELECT,
            'default' => 'bullets',
            'options' => [
                'bullets' => esc_html__('گلوله', 'pezeshkyar'),
                'progressbar' => esc_html__('نوار پیشرفت', 'pezeshkyar'),
            ],
            'condition' => [
                'pagination' => 'yes'
            ]
        ]);
        $breakpoints->add_control('loop_slider', [
            'label' => esc_html__('پیوسته تکرار شود؟', 'pezeshkyar'),
            'type' => \Elementor\Controls_Manager::SWITCHER,
            'label_on' => esc_html__('بله', 'pezeshkyar'),
            'label_off' => esc_html__('خیر', 'pezeshkyar'),
            'return_value' => 'yes',
            'default' => 'no',
            'frontend_available' => true,
        ]);

        $this->add_control('breakpoints', [
            'label' => esc_html__('نقاط شکست', 'pezeshkyar'),
            'type' => \Elementor\Controls_Manager::REPEATER,
            'fields' => $breakpoints->get_controls(),
            'prevent_empty' => false,
        ]);

        $this->end_controls_section();
    }

    protected function register_slider_style_controls()
    {
        $this->start_controls_section(
            'slider_style',
            [
                'label' => esc_html__('تنطیمات اسلایدر', 'pezeshkyar'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'slider_wrapper_padding',
            [
                'label' => esc_html__('فاصله داخلی', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'selectors' => [
                    '{{WRAPPER}} .slider-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_responsive_control(
            'slider_wrapper_margin',
            [
                'label' => esc_html__('حاشیه خارجی', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'selectors' => [
                    '{{WRAPPER}} .slider-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'slider_navigation_style',
            [
                'label' => esc_html__('پیمایش اسلایدر', 'pezeshkyar'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'navigation_size',
            [
                'label' => esc_html__('اندازه', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'default' => [
                    'unit' => 'px',
                    'size' => 18,
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next::after' => 'font-size: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .swiper-button-prev::after' => 'font-size: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        $this->add_control(
            'navigation_text_color',
            [
                'label' => esc_html__('رنگ', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next::after' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .swiper-button-prev::after' => 'color: {{VALUE}}',
                ],
            ]
        );
        $this->add_control(
            'navigation_text_hover_color',
            [
                'label' => esc_html__('رنگ هاور', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next:hover::after' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .swiper-button-prev:hover::after' => 'color: {{VALUE}}',
                ],
            ]
        );
        $this->add_control(
            'navigation_space',
            [
                'label' => esc_html__('فاصله افقی از کناره ها', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'default' => [
                    'unit' => 'px',
                    'size' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next' => 'right: {{SIZE}}{{UNIT}};left: auto;margin:0;',
                    '{{WRAPPER}} .swiper-rtl .swiper-button-prev' => 'right: {{SIZE}}{{UNIT}};left: auto',
                    '{{WRAPPER}} .swiper-button-prev' => 'left: {{SIZE}}{{UNIT}};right: auto;margin:0;',
                    '{{WRAPPER}} .swiper-rtl .swiper-button-next' => 'left: {{SIZE}}{{UNIT}};right: auto',
                ],
            ]
        );

        $this->add_control(
            'nav_vertical_align',
            [
                'label' => esc_html__('مبنای عمودی', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'top',
                'options' => [
                    'top' => esc_html__('بالا', 'pezeshkyar'),
                    'bottom' => esc_html__('پایین', 'pezeshkyar'),
                ],
            ]
        );
        $this->add_control(
            'nav_top_position',
            [
                'label' => esc_html__('فاصله از بالا', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'default' => [
                    'unit' => '%',
                    'size' => 50,
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next, {{WRAPPER}} .swiper-button-prev' => 'top: {{SIZE}}{{UNIT}};bottom:auto;transform: translateY(-50%);',
                ],
                'condition' => [
                    'nav_vertical_align' => 'top',
                ]
            ]
        );
        $this->add_control(
            'nav_bottom_position',
            [
                'label' => esc_html__('فاصله از پایین', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'default' => [
                    'unit' => '%',
                    'size' => 50,
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next, {{WRAPPER}} .swiper-button-prev' => 'bottom: {{SIZE}}{{UNIT}};top:auto;transform: translateY(50%);',
                ],
                'condition' => [
                    'nav_vertical_align' => 'bottom',
                ]
            ]
        );

        $this->add_control(
            'navigation_bg_image',
            [
                'label' => esc_html__('منحنی روی نوار پیمایش', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::ICONS,
            ]
        );
        $this->add_control('navigation_bg_image_opacity',
            [
                'label' => esc_html__('شفاقیت منحنی روی نوار پیمایش', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['%'],
                'range' => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => '%',
                    'size' => 100,
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next svg,{{WRAPPER}} .swiper-button-prev svg' => 'opacity: {{SIZE}}{{UNIT}}'
                ]
            ]);
        $this->add_control(
            'navigation_width',
            [
                'label' => esc_html__('عرض', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next svg' => 'position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;',
                    '{{WRAPPER}} .swiper-button-prev svg' => 'position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;',
                    '{{WRAPPER}} .swiper-button-next' => 'width: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .swiper-button-prev' => 'width: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .swiper-button-next svg,{{WRAPPER}} .swiper-rtl .swiper-button-prev svg' => 'transform:rotateY(180deg);',
                    '{{WRAPPER}} .swiper-button-prev svg,{{WRAPPER}} .swiper-rtl .swiper-button-next svg' => 'transform:none;',
                ],
            ]
        );
        $this->add_control(
            'navigation_height',
            [
                'label' => esc_html__('ارتفاع', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next' => 'height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .swiper-button-prev' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'nav_bg_color',
            [
                'label' => esc_html__('پس زمینه', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next::after' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .swiper-button-prev::after' => 'background-color: {{VALUE}}',
                ],
            ]
        );
        $this->add_control(
            'nav_bg_hover_color',
            [
                'label' => esc_html__('پس زمینه هاور', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next:hover::after' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .swiper-button-prev:hover::after' => 'background-color: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'nav_nex_padding',
            [
                'label' => esc_html__('فاصله داخلی دکمه بعدی', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next::after' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_control(
            'nav_prev_padding',
            [
                'label' => esc_html__('فاصله داخلی دکمه قبلی', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-prev::after' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'border',
                'selector' => '{{WRAPPER}} .swiper-button-next::after, {{WRAPPER}} .swiper-button-prev::after',
            ]
        );

        $this->add_control(
            'nav_radius',
            [
                'label' => esc_html__('شعاع دکمه های پیمایش', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next::after' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    '{{WRAPPER}} .swiper-button-prev::after' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'hide_next_button',
            [
                'label' => esc_html__('دکمه بعدی رو مخفی کن', 'pezeshkyar-core'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_off' => esc_html__('خیر', 'pezeshkyar-core'),
                'label_on' => esc_html__('بله', 'pezeshkyar-core'),
                'return_value' => 'yes',
                'default' => 'no',
                'frontend_available' => true,
            ]
        );
        $this->add_control(
            'hide_prev_button',
            [
                'label' => esc_html__('دکمه قبلی رو مخفی کن', 'pezeshkyar-core'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_off' => esc_html__('Show', 'pezeshkyar-core'),
                'label_on' => esc_html__('Hide', 'pezeshkyar-core'),
                'return_value' => 'yes',
                'default' => 'no',
                'frontend_available' => true,
            ]
        );
        $this->end_controls_section();

        $this->start_controls_section(
            'slider_pagination_style',
            [
                'label' => esc_html__('صفحه بندی اسلایدر', 'pezeshkyar'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'pagination_progressbar',
            [
                'label' => esc_html__('نوار پیشرفت', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_control(
            'pagination_progressbar_vertical_align',
            [
                'label' => esc_html__('جایگاه', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'top',
                'options' => [
                    'top' => esc_html__('بالا', 'pezeshkyar'),
                    'bottom' => esc_html__('پایین', 'pezeshkyar'),
                ],
            ]
        );
        $this->add_control(
            'pagination_progressbar_bottom_offset',
            [
                'label' => esc_html__('فاصله از پایین', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'em', 'rem'],
                'default' => [
                    'unit' => 'px',
                    'size' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-horizontal>.swiper-pagination-progressbar,{{WRAPPER}} .swiper-pagination-progressbar.swiper-pagination-horizontal,{{WRAPPER}} .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,{{WRAPPER}} .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite' => 'bottom: {{SIZE}}{{UNIT}};top:auto;',
                ],
                'condition' => [
                    'pagination_progressbar_vertical_align' => 'bottom',
                ],
            ]
        );
        $this->add_control(
            'pagination_progressbar_top_offset',
            [
                'label' => esc_html__('فاصله از بالا', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'em', 'rem'],
                'default' => [
                    'unit' => 'px',
                    'size' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-horizontal>.swiper-pagination-progressbar,{{WRAPPER}} .swiper-pagination-progressbar.swiper-pagination-horizontal,{{WRAPPER}} .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,{{WRAPPER}} .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite' => 'top: {{SIZE}}{{UNIT}};bottom:auto;',
                ],
                'condition' => [
                    'pagination_progressbar_vertical_align' => 'top',
                ],
            ]
        );
        $this->add_control(
            'pagination_progressbar_horizontal_offset',
            [
                'label' => esc_html__('فاصله افقی', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'em', 'rem'],
                'default' => [
                    'unit' => 'px',
                    'size' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-horizontal>.swiper-pagination-progressbar,{{WRAPPER}} .swiper-pagination-progressbar.swiper-pagination-horizontal,{{WRAPPER}} .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,{{WRAPPER}} .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite' => 'left: {{SIZE}}{{UNIT}};right: {{SIZE}}{{UNIT}};width:auto;',
                ],
            ]
        );
        $this->add_control(
            'pagination_progressbar_bg_color',
            [
                'label' => esc_html__('پس زمینه', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-progressbar' => 'background:{{VALUE}}'
                ]
            ]
        );
        $this->add_control(
            'pagination_progressbar_fill_color',
            [
                'label' => esc_html__('رنگ بخش تکمیل شده نوار پیشرفت', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-progressbar .swiper-pagination-progressbar-fill' => 'background:{{VALUE}}'
                ]
            ]
        );
        $this->add_control(
            'pagination_bullets',
            [
                'label' => esc_html__('گلوله ها', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_control(
            'pagination_bullets_size',
            [
                'label' => esc_html__('اندازه', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'default' => [
                    'unit' => 'px',
                    'size' => 6,
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
                ],

            ]
        );
        $this->add_control(
            'pagination_bullets_radius',
            [
                'label' => esc_html__('شعاع', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'em', 'rem'],
                'default' => [
                    'unit' => '%',
                    'size' => 50,
                ],
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet' => 'border-radius: {{SIZE}}{{UNIT}};',
                ],

            ]
        );
        $this->add_control(
            'pagination_bullets_bg_color',
            [
                'label' => esc_html__('رنگ', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet' => 'background: {{Value}};',
                ],

            ]
        );
        $this->add_control(
            'pagination_bullets_active_width',
            [
                'label' => esc_html__('عرض گلوله در حالت فعال', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'selectors' => [
                    '{{WRAPPER}} .swiper-pagination-bullet-active' => 'width: {{SIZE}}{{UNIT}};',
                ],

            ]
        );

        $this->end_controls_section();
    }

    protected function register_controls()
    {
        $this->register_slider_setting_ontrols();

        $this->register_slider_style_controls();
    }

    protected function render_slides()
    {
        for ($i = 0; $i < 100; $i++) {
            ?>
            <div class="swiper-slide">
                <?php echo $i ?>
            </div>
            <?php
        }
    }

    public function set_items($items)
    {
        $this->items = $items;
    }

    protected function render()
    {
        $slider_settings = $this->slider_settings();
//        $slider_settings['wrapperClass'] = 'swiper-clip';
        $navigation_bg_image = $this->get_settings_for_display('navigation_bg_image') ?? null;
        ?>
        <div class="slider-wrapper" style="height:100%">
            <div class="swiper" data-settings='<?php echo json_encode($slider_settings) ?>'>
                <div class="swiper-wrapper">
                    <?php $this->render_slides(); ?>
                </div>
                <div class="swiper-pagination"></div>
                <?php $hide_style = "style='display:none;'" ?>
                <div class="swiper-button-prev" <?php echo ($this->get_settings_for_display('hide_prev_button')) == 'yes' ? $hide_style : '' ?>>
                    <?php if (isset($navigation_bg_image)) \Elementor\Icons_Manager::render_icon($navigation_bg_image, ['class' => 'nav_bg']); ?>
                </div>
                <div class="swiper-button-next" <?php echo ($this->get_settings_for_display('hide_next_button')) == 'yes' ? $hide_style : '' ?>>
                    <?php if (isset($navigation_bg_image)) \Elementor\Icons_Manager::render_icon($navigation_bg_image, ['class' => 'nav_bg']); ?>
                </div>
            </div>
        </div>

        <?php
    }

}
