<?php

namespace Elementor;


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


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


class StoriesSwiper extends Widget_Base
{

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

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

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

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

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


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

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


    // query
    protected function register_content_tab_query()
    {
        $this->start_controls_section(
            'query_section',
            [
                'label' => esc_html__('Query', TEXT_DOMAIN),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

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

        $this->add_control(
            'orderby',
            [
                'type' => \Elementor\Controls_Manager::SELECT,
                'label' => esc_html__('order by', TEXT_DOMAIN),
                'options' => [
                    'modified' => [
                        'title' => esc_html__('last update', TEXT_DOMAIN),
                    ],
                    'newest' => [
                        'title' => esc_html__('newest', TEXT_DOMAIN),
                    ],
                    'oldest' => [
                        'title' => esc_html__('oldest', TEXT_DOMAIN),
                    ],
                    'rand' => [
                        'title' => esc_html__('random', TEXT_DOMAIN),
                    ],
                ],
                'default' => 'newest',
            ]
        );
        $taxonomies = get_object_taxonomies('stories', 'objects');
        unset($taxonomies['post_translations'], $taxonomies['post_format'], $taxonomies['language']);
        foreach ($taxonomies as $object) {
            if ($object !== 'post_translations' && $object !== 'post_format' && $object !== 'language') {
                $taxonomyName = is_string($object) ? $object : $object->name;
                $taxonomyLabel = is_string($object) ? $object : $object->labels->name;
                $categories = get_terms(array(
                    'taxonomy' => $taxonomyName,
                    'hide_empty' => 0,
                ));
                $cat_array = array();
                foreach ($categories as $cat_id => $cat_name) {
                    $cat_array[$cat_name->term_id] = $cat_name->name;
                }
                @$this->add_control(
                    $taxonomyName,
                    [
                        'label' => $taxonomyLabel,
                        'type' => Controls_Manager::SELECT2,
                        'label_block' => true,
                        'multiple' => true,
                        'options' => $cat_array,
                    ]
                );
            }
        }

        $this->end_controls_section();
    }

    // carousel
    protected function register_content_tab_carousel_controls()
    {
        $this->start_controls_section(
            'section_swiper',
            [
                'label' => esc_html__('Thumbnails 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' => '12.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' => '6.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' => '3.5',
                'placeholder' => esc_html__('enter the number', TEXT_DOMAIN),

            ]
        );


        $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' => 16,
                '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 thumbnail
    protected function register_style_tab_card_controls()
    {
        $this->start_controls_section(
            'section_card_style',
            [
                'label' => esc_html__('Thumbnail', TEXT_DOMAIN),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'thumb_border_color',
            [
                'label' => esc_html__('Thumbnail border color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .story-item-circle svg ' => 'stroke: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'thumb_size',
            [
                'label' => __('Thumbnail size', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 40,
                        'max' => 300,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .story-item' => 'width: {{SIZE}}{{UNIT}}!important;',
                    '{{WRAPPER}} .story-item-circle' => 'width: {{SIZE}}{{UNIT}}!important;height: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );

        $this->add_responsive_control(
            'thumb_image_padding',
            [
                'label' => __('Thumbnail image padding', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .story-item-circle img' => 'width: calc(100% - {{SIZE}}{{UNIT}})!important;height: calc(100% - {{SIZE}}{{UNIT}})!important;',
                ],
            ]
        );

        $this->end_controls_section();
    }

    // style thumbnail title
    protected function register_style_tab_title_controls()
    {
        $this->start_controls_section(
            'section_title_style',
            [
                'label' => esc_html__('Title', 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}} .story-item-title',
            ]
        );
        $this->add_responsive_control(
            'title_margin',
            [
                'label' => __('margin', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => -15,
                        'max' => 50,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .story-item-title' => 'margin-top: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );


        $this->add_control(
            'title_color',
            [
                'label' => esc_html__('color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .story-item-title' => 'color: {{VALUE}};',
                ],
            ]
        );

        $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
    {
        $order = "DESC";
        $orderBy = $settings['orderby'];
        if ($orderBy == 'newest') {
            $orderBy = 'date';
        }
        if ($orderBy == 'oldest') {
            $orderBy = 'date';
            $order = "ASC";
        }

        $args = array(
            'posts_per_page' => $settings['count'],
            'post_status' => 'publish',
            'post_type' => 'stories',
            'orderby' => $orderBy,
            'order' => $order,
        );
        $taxonomies = get_object_taxonomies('stories', 'objects');
        foreach ($taxonomies as $object) {
            if (!empty($settings[$object->name])) {
                $args['tax_query'] = array(
                    array(
                        'taxonomy' => $object->name,
                        'terms' => $settings[$object->name],
                    )
                );
            }
        }

        return $args;
    }

    public function render_price($product){
        if( $product->is_type('variable')){
            $prices = $product->get_variation_prices();
            $regular_price = (float) min($prices['regular_price']);
            $sale_price    = (float) min($prices['sale_price']);

        }elseif( $product->is_type('grouped') ){
            $children_ids = $product->get_children();
            $child_product = wc_get_product($children_ids[0]);
            $regular_price = (float) $child_product->get_regular_price();
            $sale_price    = (float) $child_product->get_sale_price();

        }else{
            $regular_price = (float) $product->get_regular_price();
            $sale_price    = (float) $product->get_sale_price();
        }

        echo "<div class='product-price-container'>";

        echo "<div class='product-price'>";
        if ($regular_price == 0){
            echo '<span class="current-price">'. __('Free',TEXT_DOMAIN).'</span>';
        }else{
            if ($regular_price == $sale_price){
                echo "<div class='d-flex flex-column'><span class='current-price'>".number_format($regular_price)."</span><span class='tooman'>".get_woocommerce_currency_symbol()."</span></div>";
            }else{
                if($sale_price == 0 ||  empty($sale_price) ){
                    echo "<div class='d-flex flex-column'><span class='current-price'>".number_format($regular_price)."</span><span class='tooman'>".get_woocommerce_currency_symbol()."</span></div>";

                }else{
                    echo '<div class="current-price">'.number_format($regular_price).'</div>';
                    echo "<div class='d-flex'><span class='old-price'>".number_format($sale_price)."</span><span class='tooman ms-2'>".get_woocommerce_currency_symbol()."</span></div>";

                }
            }
        }
        echo "</div></div>";

    }


    protected function render()
    {

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

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

        // stories thumbnail swiper
        echo "<div id='storiesSwiperSm' class='swiper swiper-before-init small-stories-swiper elementor-swiper' swiper-items-per-group='" . $itemsPerGroup . "' swiper-items='" . $items . "' swiper-items-tablet='" . $itemsTablet . "' swiper-items-mobile='" . $itemsMobile . "' swiper-speed='" . $smartSpeed . "' swiper-center='" . $center . "' swiper-loop='" . $loop . "' swiper-margin='" . $margin . "'>";
        // main swiper wrapper
        echo "<div class='swiper-wrapper'>";
        $query = new \WP_Query($args);
        $storyIndex = 0;
        while ($query->have_posts()): $query->the_post(); ?>
            <div class="swiper-slide">
                <a href="#" class="story-item" data-story-index="<?php echo $storyIndex; ?>">
                    <div class="story-item-circle">
                        <?php if (has_post_thumbnail()): the_post_thumbnail('thumbnail');
                        else:
                            echo "<img src='" . esc_url(get_template_directory_uri() . '/images/person.webp') . "' alt='image'>"; endif; ?>
                        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
                             style="enable-background:new -580 439 577.9 194;" xml:space="preserve"><circle cx="50"
                                                                                                            cy="50"
                                                                                                            r="40"/></svg>
                    </div>
                    <div class="story-item-title"><?php the_title(); ?></div>
                </a>
            </div>

            <?php $storyIndex++; endwhile;
        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>";


        // stories main wrapper swiper
        echo "<div class='stories-wrapper'>";
        echo "<div class='swiper large-stories-swiper' id='storiesSwiperLg'>";
        echo "<div class='swiper-wrapper'>";
        $query = new \WP_Query($args);
        while ($query->have_posts()): $query->the_post();
            $storyType = get_post_meta(get_the_ID(), TEXT_DOMAIN . '_type', true);
            $storyMediaUrl = get_post_meta(get_the_ID(), TEXT_DOMAIN . '_media', true);
            $storyText = get_post_meta(get_the_ID(), TEXT_DOMAIN . '_text', true);
            $storyBtnText = get_post_meta(get_the_ID(), TEXT_DOMAIN . '_btn_text', true);
            $storyBtnLink = get_post_meta(get_the_ID(), TEXT_DOMAIN . '_btn_link', true);
            $storyProducts = get_post_meta(get_the_ID(), TEXT_DOMAIN . '_product_ids', true); ?>
            <div class="swiper-slide">
                <!-- type: image or video -->
                <div class="story-item-lg <?php echo $storyType; ?>">

                    <?php if ($storyType === 'image'): ?>
                        <img src="<?php echo $storyMediaUrl; ?>" alt="<?php the_title(); ?>">
                    <?php else: ?>
                        <video class="story-video-tag" preload="none">
                            <source src="<?php echo $storyMediaUrl; ?>" type="video/mp4">
                        </video>
                    <?php endif; ?>

                    <div class="story-item-lg-content">
                        <!-- top section overly -->
                        <div class="story-item-lg-overly">
                            <span class="story-item-lg-back"><i class="icon-x1"></i></span>
                            <div class="story-item-lg-title">
                                <div class="avatar">
                                    <?php if (has_post_thumbnail()): the_post_thumbnail('thumbnail');
                                    else:
                                        echo "<img src='" . esc_url(get_template_directory_uri() . '/images/person.webp') . "' alt='image'>"; endif; ?>
                                </div>
                                <div class="ms-2 title"><?php the_title(); ?></div>
                            </div>

                            <div class="story-video-controls">
                                <span class="story-video-controls-btn story-play-pause-btn playing">
                                    <i class="icon-play is-playing-icon"></i>
                                    <i class="icon-pause not-playing-icon"></i>
                                </span>
                                <!-- video only -->
                                <?php if ($storyType === 'video'): ?>
                                    <span class="story-video-controls-btn story-volume-btn">
                                    <i class="icon-volume-2 not-muted-icon"></i>
                                    <i class="icon-volume-x is-muted-icon"></i>
                                </span>
                                <?php endif; ?>
                            </div>
                        </div>

                        <!-- bottom section overly -->
                        <div class="story-item-lg-overly story-item-lg-overly-bottom">

                            <!-- description -->
                            <?php if (!empty($storyText)): ?>
                                <div class="story-item-lg-description"><?php echo $storyText ?></div>
                            <?php endif; ?>

                            <!-- button -->
                            <?php if (!empty($storyBtnText) && !empty($storyBtnLink)): ?>
                                <a href="<?php echo $storyBtnLink; ?>" class="story-item-lg-btn">
                                    <i class="icon-link"></i>
                                    <span class="ms-2"><?php echo $storyBtnText; ?></span>
                                </a>
                            <?php endif; ?>

                            <!-- products -->
                            <?php if (!empty($storyProducts)) {
                                $product_ids_array = array_map('intval', explode(',', $storyProducts));
                                $productsArgs = array(
                                    'post_type' => 'product',
                                    'post__in' => $product_ids_array,
                                    'orderby' => 'post__in',
                                    'posts_per_page' => -1,
                                );
                                $storyProductsQuery = new \WP_Query($productsArgs); ?>

                                <div class="story-item-lg-products swiper-no-swiping">
                                    <?php while ($storyProductsQuery->have_posts()): $storyProductsQuery->the_post();
                                        $product = wc_get_product($storyProductsQuery->post->ID);
                                        echo "<a href='" . get_the_permalink() . "' class='product-item-story'>";

                                    if (has_post_thumbnail()) {
                                        the_post_thumbnail('thumbnail');
                                    } else {
                                        ?>
                                        <img src="<?php echo esc_url(get_template_directory_uri() . '/images/default.jpg'); ?>"
                                             alt="<?php the_title(); ?>">
                                    <?php }

                                    echo "<div class='product-item-h-content'>";
                                    echo "<span class='product-title'>" . get_the_title() . "</span>";
                                    echo "<span class='product-item-h-content-price'>".$product->get_price_html()."</span>";
                                    echo "</div>";
                                    echo "</a>";
                                    endwhile;
                                    wp_reset_postdata(); ?>
                                </div>

                            <?php } ?>


                        </div>
                    </div>
                </div>
            </div>
        <?php endwhile; ?>
        <?php wp_reset_postdata();
        echo "</div>";

        echo "<div class='swiper-pagination'></div>";
        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>";

    }


}

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