<?php

namespace Elementor;


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


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


class ProductCategoriesSwiper extends Widget_Base
{

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

    public function get_title()
    {
        return __('Product Categories Carousel', TEXT_DOMAIN);
    }

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

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

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


    protected function _register_controls()
    {
        // content tab
        $this->register_content_tab_posts();
        $this->register_content_tab_carousel_controls();

        // style tab
        $this->register_style_tab_card_controls();
        $this->register_style_tab_content_controls();
        $this->register_style_tab_carousel_controls();
    }


    // categories content
    protected function register_content_tab_posts()
    {
        $this->start_controls_section(
            'posts_section',
            [
                'label' => esc_html__('Categories', TEXT_DOMAIN),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'show_count',
            [
                'label' => esc_html__('Show count', 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',
            ]
        );


        $repeater = new Repeater();

        $categories = get_terms( [
            'taxonomy' => 'product_cat',
            'hide_empty' => false,
        ] );

        $category_options = [];
        if (is_array($categories)) {
            foreach ( $categories as $category ) {
                $category_options[$category->term_id . '|' . $category->name] = $category->name;
            }
        }
 

        $repeater->add_control(
            'category_id',
            [
                'label' => __( 'Select Category', TEXT_DOMAIN),
                'type' => \Elementor\Controls_Manager::SELECT2,
                'label_block' => true,
                'options' => $category_options,
                'multiple' => false,
                'default' => '',
            ]
        );

        $this->add_control(
            'repeator_categories',
            [
                'label' => esc_html__('Items', TEXT_DOMAIN),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                // Extract just the name part from the encoded value
                'title_field' => '<# 
            var parts = category_id ? category_id.split("|") : ["", "No Category"]; 
            print(parts[1]); 
        #>',
                'frontend_available' => true,
            ]
        );


        $this->end_controls_section();

    }

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

        // items
        $this->add_control(
            'carousel_items_heading',
            [
                'label' => esc_html__('Slides per view', 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' => '5.5',
                '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' => '4.5',
                '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.5',
                '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' => 'no',
                'separator' => 'before',

            ]
        );

        $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_smart_speed',
            [
                'label' => __('animation speed', TEXT_DOMAIN),
                'type' => Controls_Manager::NUMBER,
                'default' => 400,

            ]
        );

        $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' => 'no',

            ]
        );

        $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' => 'no',
            ]
        );

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

            ]
        );

        $this->add_control(
            'carousel_items_per_group',
            [
                'label' => esc_html__('Item to change', TEXT_DOMAIN),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 1,
                'placeholder' => esc_html__('enter the number', TEXT_DOMAIN),

            ]
        );

        $this->end_controls_section();
    }

    // style box
    protected function register_style_tab_card_controls()
    {
        $this->start_controls_section(
            'section_box_style',
            [
                'label' => esc_html__('Box', TEXT_DOMAIN),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->start_controls_tabs(
            'card_style_tabs', [
                'separator' => 'before'
            ]
        );
        $this->start_controls_tab(
            'card_style_normal_tab',
            [
                'label' => esc_html__('normal', TEXT_DOMAIN),
            ]
        );
        $this->add_responsive_control(
            'box_radius',
            [
                'label' => __('border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', 'rem'],
                'selectors' => [
                    '{{WRAPPER}} .product-category-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_responsive_control(
            'box_image_radius',
            [
                'label' => __('image border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', 'rem'],
                'selectors' => [
                    '{{WRAPPER}} .product-category-item-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'card_bg',
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .product-category-item',
                'separator' => 'after'
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'box_border_type',
                'label' => esc_html__('border', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .product-category-item',
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'box_shadow',
                'selector' => '{{WRAPPER}} .product-category-item',
            ]
        );
        $this->end_controls_tab();

        $this->start_controls_tab(
            'card_style_hover_tab',
            [
                'label' => esc_html__('hover', TEXT_DOMAIN),
            ]
        );
        $this->add_responsive_control(
            'box_radius_hover',
            [
                'label' => __('border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', 'rem'],
                'selectors' => [
                    '{{WRAPPER}} .product-category-item:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_responsive_control(
            'box_image_radius_hover',
            [
                'label' => __('image border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', 'rem'],
                'selectors' => [
                    '{{WRAPPER}} .product-category-item:hover .product-category-item-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'card_bg_hover',
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .product-category-item:hover',
                'separator' => 'after'
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'box_border_type_hover',
                'label' => esc_html__('border', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .product-category-item:hover',
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'box_shadow_hover',
                'selector' => '{{WRAPPER}} .product-category-item:hover',
            ]
        );
        $this->end_controls_tab();
        $this->end_controls_tabs();




        $this->end_controls_section();
    }

    // style title
    protected function register_style_tab_content_controls()
    {
        $this->start_controls_section(
            'section_title_style',
            [
                'label' => esc_html__('Content', TEXT_DOMAIN),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'title_typography',
                'label' => esc_html__('typography', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .product-category-item-title',
            ]
        );
        $this->add_responsive_control(
            'title_margin',
            [
                'label'      => __( 'margin', TEXT_DOMAIN ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => [ 'px', 'em', 'rem' ],
                'range'      => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors'  => [
                    '{{WRAPPER}} .product-category-item-title' => 'margin-bottom: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );


        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'count_typography',
                'label' => esc_html__('typography', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .product-category-item-count',
            ]
        );

        $this->add_responsive_control(
            'more_icon_size',
            [
                'label' => __('Icon size', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .product-category-item-arrow' => 'font-size: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );

        $this->add_control(
            'more_color',
            [
                'label' => esc_html__('Icon color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .product-category-item-arrow' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'image_margin',
            [
                'label'      => __( 'image margin', TEXT_DOMAIN ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => [ 'px', 'em', 'rem' ],
                'range'      => [
                    'px' => [
                        'min' => -50,
                        'max' => 200,
                    ],
                ],
                'selectors'  => [
                    '{{WRAPPER}} .product-category-item-image' => 'margin-bottom: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );

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

        // normal tab
        $this->start_controls_tab(
            'title_style_normal_tab',
            [
                'label' => esc_html__('normal', TEXT_DOMAIN),
            ]
        );
        $this->add_control(
            'title_color',
            [
                'label' => esc_html__('title color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .product-category-item-title' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'count_color',
            [
                'label' => esc_html__('count color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .product-category-item-count' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_tab();

        // hover tab
        $this->start_controls_tab(
            'category_style_hover_tab',
            [
                'label' => esc_html__('hover', TEXT_DOMAIN),
            ]
        );
        $this->add_control(
            'title_color_hover',
            [
                'label' => esc_html__('color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .product-category-item:hover .product-category-item-title' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'count_color_hover',
            [
                'label' => esc_html__('count color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .product-category-item:hover .product-category-item-count' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->end_controls_tab();

        $this->end_controls_tabs();
        $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,

            ]
        );

        // buttons backdrop
        $this->add_control(
            'carousel_arrows_backdrop_style_heading',
            [
                'label' => esc_html__('Arrows backdrop', TEXT_DOMAIN),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'carousel_arrows_backdrop_color',
            [
                'label' => esc_html__('color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .swiper-backdrop-button.prev' => 'background: linear-gradient(to left, transparent,{{VALUE}});',
                    '{{WRAPPER}} .swiper-backdrop-button.next' => 'background: linear-gradient(to right, transparent,{{VALUE}});',
                ],
            ]
        );


        // nav
        $this->add_control(
            'carousel_nav_style_heading',
            [
                'label' => esc_html__('arrows', TEXT_DOMAIN),
                'type' => Controls_Manager::HEADING,
            ]
        );
        $this->add_responsive_control(
            'carousel_nav_width',
            [
                'label' => __('width', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .custom-swiper-button-prev,{{WRAPPER}} .custom-swiper-button-next' => 'width: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_responsive_control(
            'carousel_nav_height',
            [
                'label' => __('height', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .custom-swiper-button-prev,{{WRAPPER}} .custom-swiper-button-next' => 'height: {{SIZE}}{{UNIT}}!important;line-height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        $this->add_responsive_control(
            'carousel_nav_offset',
            [
                'label' => __('margin', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => -100,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .custom-swiper-button-next' => 'left: {{SIZE}}{{UNIT}}!important;',
                    '{{WRAPPER}} .custom-swiper-button-prev' => 'right: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );
        $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->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();


        $this->end_controls_tabs();
        $this->end_controls_section();
    }

    protected function renderQuery($settings): array
    {
        // Get custom ordered categories from repeater
        $custom_categories = $settings['repeator_categories'];
        if (!is_array($custom_categories)) {
            $custom_categories = [];
        }
        $category_ids = [];

        // Extract category IDs from repeater items
        if (!empty($custom_categories) && is_array($custom_categories)) {
            foreach ($custom_categories as $item) {
                if (!empty($item['category_id'])) {
                    // Extract just the ID part from the combined value
                    $parts = explode('|', $item['category_id']);
                    $category_ids[] = (int)$parts[0]; // Convert to integer to be safe
                }
            }
        }

        if (empty($category_ids)) {
            return [];
        }

        // Get unique category IDs while preserving the order
        $unique_ids = array_unique($category_ids);

        // Get categories with unique IDs
        $args = array(
            'taxonomy' => 'product_cat',
            'include' => $unique_ids,
            'orderby' => 'include',
            'hide_empty' => false,
        );

        $terms = get_terms($args);

        if (is_wp_error($terms) || empty($terms)) {
            return [];
        }

        // Create a lookup array for quick access by term ID
        $terms_by_id = array();
        foreach ($terms as $term) {
            $terms_by_id[$term->term_id] = $term;
        }

        // Create ordered result array including duplicates
        $ordered_categories = array();
        foreach ($category_ids as $id) {
            if (isset($terms_by_id[$id])) {
                $ordered_categories[] = $terms_by_id[$id];
            }
        }

        return $ordered_categories;
    }

    protected function render()
    {

        $settings = $this->get_settings_for_display();
        $product_categories = $this->renderQuery($settings);


        // swiper
        $itemsPerGroup = $settings['carousel_items_per_group'];
        $items = $settings['carousel_items'];
        $itemsTablet = $settings['carousel_items_tablet'];
        $itemsMobile = $settings['carousel_items_mobile'];
        $autoplay = $settings['carousel_autoplay'];
        $center = $settings['carousel_center'];
        $loop = $settings['carousel_loop'];
        $margin = $settings['carousel_margin'];
        $smartSpeed = $settings['carousel_smart_speed'];
        $autoplayDelay = $settings['carousel_autoplay_delay'];

        // content
        $showCount = $settings['show_count'] === 'yes';

        if (!is_wp_error($product_categories)) {

            if (!empty($product_categories) && is_array($product_categories)) {
                echo "<div class='swiper swiper-before-init products-swiper elementor-swiper buttons-backdrop-desktop' swiper-items-per-group='" . $itemsPerGroup . "' swiper-items='" . $items . "' swiper-items-tablet='" . $itemsTablet . "' swiper-items-mobile='" . $itemsMobile . "' swiper-autoplay='" . $autoplay . "' swiper-speed='" . $smartSpeed . "' swiper-autoplay-delay='" . $autoplayDelay . "' swiper-center='" . $center . "' swiper-loop='" . $loop . "' swiper-margin='" . $margin . "'>";
                // main swiper wrapper
                echo "<div class='swiper-wrapper'>";
                foreach ($product_categories as $category) {
                    $category_link = esc_url(get_term_link($category));
                    $category_image_id = get_term_meta($category->term_id, 'thumbnail_id', true);
                    $category_image_url = wp_get_attachment_url($category_image_id);
                    $category_count = $category->count; ?>
                    <div class="swiper-slide">
                        <a href="<?php echo $category_link; ?>" class="product-category-item">
                            <div class="product-category-item-image">
                                <?php if ($category_image_url): ?>
                                    <img src="<?php echo esc_url($category_image_url) ?>" alt="category">
                                <?php else: ?>
                                    <img src="<?php echo esc_url(get_template_directory_uri() . '/images/default.jpg'); ?>"
                                         alt="image">
                                <?php endif; ?>
                            </div>
                            <h5 class="product-category-item-title"><?php echo esc_html($category->name); ?></h5>
                            <?php if ($showCount):?>
                                <div class="product-category-item-count"><span><?php echo esc_html($category_count) ?></span><span><?php echo _e('Product', 'woocommerce'); ?></span></div>
                            <?php endif;?>
                            <span class="product-category-item-arrow"><i class="iconly-Arrow-Left"></i></span>
                        </a>
                    </div>
                    <?php
                }
                echo "</div>";

                // button navigations
                echo "<div class='swiper-backdrop-button prev'></div>";
                echo "<div class='swiper-backdrop-button next'></div>";
                echo "<div class='custom-swiper-button-prev swiper-button-primary'><i class='iconly-Arrow-Right'></i></div>";
                echo "<div class='custom-swiper-button-next swiper-button-primary'><i class='iconly-Arrow-Left'></i></div>";

                echo "<div class='swiper-spinner'></div>";
                echo "</div>";
            }else{
                echo "<div class='text-primary'>".__('No categories selected.',TEXT_DOMAIN)."</div>";
            }
        }

    }


}

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