<?php

namespace Elementor;

use RivaxStudio\Traits\Rivax_Group_Control_Query;
use RivaxStudio\Traits\Rivax_Global_Widget_Controls;
use RivaxStudio\Traits\Rivax_Post_skin_base;

if ( ! defined( 'ABSPATH' ) ) { exit; } // Exit if accessed directly


class Rivax_Spot_Slider_Widget extends Widget_Base {

    use Rivax_Group_Control_Query;
    use Rivax_Global_Widget_Controls;
    use Rivax_Post_skin_base;

    public function get_name() {
        return 'rivax-spot-slider';
    }

    public function get_title() {
        return esc_html__('Spot Slider', 'newsfy');
    }

    public function get_icon() {
        return 'eicon-post-slider rivax-e-icon';
    }

    protected function get_html_wrapper_class() {
        return $this->get_name() . '-widget';
    }

    public function get_categories() {
        return ['rivax-elements'];
    }
	
	public function get_style_depends() {
		return [ 'swiper', 'e-swiper' ];
	}


    protected function register_post_controls() {

        $this->start_controls_section(
            'section_post_settings',
            [
                'label' => esc_html__( 'Post Settings', 'newsfy' ),
                'tab'   => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_responsive_control(
            'item_height',
            [
                'label'     => esc_html__( 'Item Height', 'newsfy' ),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 300,
                        'max' => 1000,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .rivax-posts-wrapper' => '--slider-height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'content_width',
            [
                'label'     => esc_html__( 'Content Width', 'newsfy' ),
                'type'      => Controls_Manager::SLIDER,
                'size_units'=> [ 'px', '%' ],
                'range'     => [
                    'px' => [
                        'min' => 200,
                        'max' => 1000,
                    ],
                    '%' => [
                        'min' => 40,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .content-wrapper-inner' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );


        $this->add_responsive_control(
            'align_content',
            [
                'label'     => esc_html__( 'Content Alignment', 'newsfy' ),
                'type'      => Controls_Manager::CHOOSE,
                'options'   => [
                    'left'   => [
                        'title' => esc_html__( 'Left', 'newsfy' ),
                        'icon'  => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__( 'Center', 'newsfy' ),
                        'icon'  => 'eicon-text-align-center',
                    ],
                    'right'  => [
                        'title' => esc_html__( 'Right', 'newsfy' ),
                        'icon'  => 'eicon-text-align-right',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .content-wrapper-inner' => 'text-align: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'content_position',
            [
                'label'     => esc_html__( 'Content Position', 'newsfy' ),
                'type'      => Controls_Manager::SELECT,
                'default'   => 'center-left',
                'options'   => [
                    'top-left'       => esc_html__( 'Top Left', 'newsfy' ),
                    'top-right'       => esc_html__( 'Top Right', 'newsfy' ),
                    'bottom-left'       => esc_html__( 'Bottom Left', 'newsfy' ),
                    'bottom-center'       => esc_html__( 'Bottom Center', 'newsfy' ),
                    'bottom-right'      => esc_html__( 'Bottom Right', 'newsfy' ),
                    'center-center'      => esc_html__( 'Center Center', 'newsfy' ),
                    'center-left'      => esc_html__( 'Center Left', 'newsfy' ),
                    'center-right'      => esc_html__( 'Center Right', 'newsfy' ),
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Image_Size::get_type(),
            [
                'name' => 'thumbnail',
                'exclude' => ['custom'],
                'default' => 'rivax-wide',
                'separator' => 'before',
            ]);

        $this->add_control(
            'skip_lazy_loading',
            [
                'label'     => esc_html__( 'Skip Lazy Loading', 'newsfy' ),
                'description' => sprintf(esc_html__('Use this to remove lazy loading from %s Largest Contentful Paint (LCP) %s image.', 'newsfy'), '<a href="' . esc_url('https://gtmetrix.com/dont-lazy-load-lcp-image.html') . '" target="_blank">', '</a>'),
                'type'      => Controls_Manager::SELECT,
                'options'   => [
                    '0'     => esc_html__( 'No', 'newsfy' ),
                    '1'     => esc_html__( '1 Image', 'newsfy' ),
                ],
            ]
        );

        $this->add_control(
            'carousel_effect',
            [
                'label'        => esc_html__( 'Effect', 'newsfy' ),
                'type'         => Controls_Manager::SELECT,
                'default'      => 'fade',
                'options'      => [
                    'slide'    => esc_html__( 'Slide', 'newsfy' ),
                    'fade'     => esc_html__( 'Fade', 'newsfy' ),
                ],
                'separator'    => 'before',
            ]
        );

        $this->add_control(
            'image_zoom_size',
            [
                'label'     => esc_html__( 'Image Zoom Size', 'newsfy' ),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 1,
                        'max' => 2,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 1,
                ],
            ]
        );

        $this->register_title_controls('h2');

        $this->register_terms_controls();

        $this->register_author_controls();

        $this->register_date_controls();

        $this->register_comments_controls();

        $this->register_views_count_controls();

        $this->register_reading_time_controls();

        $this->register_excerpt_controls();

        $this->register_read_more_controls();

        $this->end_controls_section();

    }


    protected function register_thumb_controls() {

        $this->start_controls_section(
            'section_thumb_settings',
            [
                'label' => esc_html__( 'Thumb Settings', 'newsfy' ),
                'tab'   => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'thumb_layout',
            [
                'label'     => esc_html__( 'Layout', 'newsfy' ),
                'type'      => Controls_Manager::SELECT,
                'default' => 'image-left',
                'options'   => [
                    'image'        => esc_html__( 'Image', 'newsfy' ),
                    'content'      => esc_html__( 'Content', 'newsfy' ),
                    'image-cover'  => esc_html__( 'Image Cover + Content', 'newsfy' ),
                    'image-left'   => esc_html__( 'Image Left + Content', 'newsfy' ),
                    'image-top'    => esc_html__( 'Image Top + Content', 'newsfy' ),
                ],
            ]
        );

        $this->add_control(
            'thumbs_direction',
            [
                'label'     => esc_html__( 'Direction', 'newsfy' ),
                'type'      => Controls_Manager::SELECT,
                'default' => 'horizontal',
                'options'   => [
                    'horizontal'     => esc_html__( 'Horizontal', 'newsfy' ),
                    'vertical'       => esc_html__( 'Vertical', 'newsfy' ),
                ],
            ]
        );

        $this->add_control(
            'thumbs_vertical_inside',
            [
                'label'     => esc_html__( 'Inside Slider', 'newsfy' ),
                'type'      => Controls_Manager::SWITCHER,
                'condition' => [
                    'thumbs_direction' => 'vertical',
                ],
            ]
        );

        $this->add_control(
            'thumbs_count',
            [
                'label'     => esc_html__( 'Count', 'newsfy' ),
                'type'      => Controls_Manager::SELECT,
                'default' => '3',
                'options'   => [
                    '2'     => '2',
                    '3'     => '3',
                    '4'     => '4',
                    '5'     => '5',
                    '6'     => '6',
                ],
            ]
        );

        $this->add_control(
            'thumbs_spacing',
            [
                'label'     => esc_html__( 'Items Spacing', 'newsfy' ),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 0,
                        'max' => 30,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 15,
                ],
            ]
        );

	    $this->add_responsive_control(
		    'vertical_thumbs_height',
		    [
			    'label'     => esc_html__( 'Container Height', 'newsfy' ),
			    'type'      => Controls_Manager::SLIDER,
			    'range'     => [
				    'px' => [
					    'min' => 200,
					    'max' => 1000,
				    ],
			    ],
				'render_type'    => 'template',
			    'condition' => [
				    'thumbs_direction' => 'vertical',
			    ],
			    'selectors' => [
				    '{{WRAPPER}} .rivax-posts-wrapper' => '--v-thumbs-height: {{SIZE}}{{UNIT}};',
			    ],
		    ]
	    );

        $this->add_control(
            'slider_item_width',
            [
                'label'     => esc_html__( 'Slider Width', 'newsfy' ),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 60,
                        'max' => 90,
                    ],
                ],
                'render_type'    => 'template',
                'condition' => [
                    'thumbs_direction' => 'vertical',
                    'thumbs_vertical_inside' => '',
                ],
                'selectors' => [
                    '{{WRAPPER}} .rivax-posts-carousel-wrapper' => 'width: {{SIZE}}%;',
                ],
            ]
        );

        $this->add_responsive_control(
            'thumb_img_width',
            [
                'label'     => esc_html__( 'Image Width', 'newsfy' ),
                'type'      => Controls_Manager::SLIDER,
                'size_units'=> [ 'px', '%' ],
                'range'     => [
                    'px' => [
                        'min' => 50,
                        'max' => 150,
                    ],
                    '%' => [
                        'min' => 20,
                        'max' => 50,
                    ],
                ],
                'condition' => [
                    'thumb_layout' => 'image-left',
                ],
                'selectors' => [
                    '{{WRAPPER}} .thumb-wrapper .image-wrapper' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'thumb_img_height',
            [
                'label'     => esc_html__( 'Image Height', 'newsfy' ),
                'type'      => Controls_Manager::SLIDER,
                'size_units'=> [ 'px', '%' ],
                'range'     => [
                    'px' => [
                        'min' => 50,
                        'max' => 300,
                    ],
                    '%' => [
                        'min' => 30,
                        'max' => 100,
                    ],
                ],
                'condition' => [
                    'thumb_layout!'     => 'content',
                ],
                'selectors' => [
                    '{{WRAPPER}} .thumb-wrapper .image-wrapper' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'thumbs_max_width',
            [
                'label'     => esc_html__( 'Max Width', 'newsfy' ),
                'type'      => Controls_Manager::SLIDER,
                'size_units'=> [ 'px', '%' ],
                'range'     => [
                    'px' => [
                        'min' => 300,
                        'max' => 1000,
                    ],
                    '%' => [
                        'min' => 50,
                        'max' => 100,
                    ],
                ],
                'render_type'    => 'template',
                'condition' => [
                    'thumbs_direction' => 'horizontal',
                ],
                'selectors' => [
                    '{{WRAPPER}} .thumbs-slider' => 'max-width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'thumbs_align',
            [
                'label'     => esc_html__( 'Alignment', 'newsfy' ),
                'type'      => Controls_Manager::CHOOSE,
                'description' => esc_html__( 'Max Width must be set. Default is center.', 'newsfy' ),
                'options'   => [
                    'left'   => [
                        'title' => esc_html__( 'Left', 'newsfy' ),
                        'icon'  => 'eicon-h-align-left',
                    ],
                    'right'  => [
                        'title' => esc_html__( 'Right', 'newsfy' ),
                        'icon'  => 'eicon-h-align-right',
                    ],
                ],
                'condition' => [
                    'thumbs_direction' => 'horizontal',
                ],
                'selectors' => [
                    '{{WRAPPER}} .thumbs-slider' => 'margin-{{VALUE}}: 0;',
                ],
            ]
        );

        $this->add_responsive_control(
            'thumbs_top_spacing',
            [
                'label'     => esc_html__( 'Top Spacing', 'newsfy' ),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => -300,
                        'max' => 0,
                    ],
                ],
                'condition' => [
                    'thumbs_direction' => 'horizontal',
                ],
                'selectors' => [
                    '{{WRAPPER}} .thumbs-slider' => 'margin-top: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'thumbs_side_spacing',
            [
                'label'     => esc_html__( 'Side Spacing', 'newsfy' ),
                'type'      => Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'range'     => [
                    'px' => [
                        'min' => 0,
                        'max' => 150,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 30,
                    ],
                ],
                'condition' => [
                    'thumbs_direction' => 'horizontal',
                ],
                'selectors' => [
                    '{{WRAPPER}} .thumbs-slider-wrapper' => 'padding-left: {{SIZE}}{{UNIT}}; padding-right: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'show_thumb_date',
            [
                'label'     => esc_html__( 'Show Date', 'newsfy' ),
                'type'      => Controls_Manager::SWITCHER,
                'default'   => 'yes',
                'condition' => [
                    'thumb_layout!' => 'image',
                ],
            ]
        );

        $this->add_control(
            'disable_thumb_bar',
            [
                'label'     => esc_html__( 'Disable Progress Bar', 'newsfy' ),
                'type'      => Controls_Manager::SWITCHER,
                'selectors' => [
                    '{{WRAPPER}} .thumb-wrapper::after' => 'display: none;',
                ],
            ]
        );

        $this->end_controls_section();

    }


    protected function register_style_post_controls() {

        $this->start_controls_section('section_style_post',
            [
                'label' => esc_html__('Items', 'newsfy'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'item_overlay_background',
                'exclude' => [ 'image' ],
                'selector' => '{{WRAPPER}} .main-slider .image-wrapper::before',
            ]
        );

        $this->add_responsive_control('item_border_radius',
            [
                'label' => esc_html__('Border Radius', 'newsfy'),
                'type' => Controls_Manager::DIMENSIONS,
                'selectors' => [
                    '{{WRAPPER}} .main-slider' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]);

        $this->end_controls_section();



        $this->start_controls_section('section_style_content',
            [
                'label' => esc_html__('Content', 'newsfy'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]);

        $this->add_responsive_control('container_padding',
            [
                'label' => esc_html__('Container Padding', 'newsfy'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .content-wrapper-outer' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]);

        $this->add_responsive_control('content_padding',
            [
                'label' => esc_html__('Content Padding', 'newsfy'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .content-wrapper-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]);
			
		$this->add_responsive_control('content_margin',
            [
                'label' => esc_html__('Content Margin', 'newsfy'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .content-wrapper-inner' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]);

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'item_content_background',
                'exclude' => [ 'image' ],
                'selector' => '{{WRAPPER}} .content-wrapper-inner',
            ]
        );

        $this->add_control(
            'heading_item_content_bg_dark_mode',
            [
                'label'     => esc_html__( 'Background - Dark Mode', 'newsfy' ),
                'type'      => Controls_Manager::HEADING,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'item_content_bg_dark_mode',
                'exclude' => [ 'image' ],
                'selector' => 'html[scheme="dark"] {{WRAPPER}} .content-wrapper-inner',
            ]
        );

        $this->add_responsive_control('item_content_border_radius',
            [
                'label' => esc_html__('Border Radius', 'newsfy'),
                'type' => Controls_Manager::DIMENSIONS,
                'selectors' => [
                    '{{WRAPPER}} .content-wrapper-inner' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]);
			
		$this->add_control(
            'item_content_blur_bg',
            [
                'label'     => esc_html__( 'Blur Background', 'newsfy' ),
				'description'   => esc_html__( 'Need a low opacity background.', 'newsfy' ),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 0,
                        'max' => 30,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .content-wrapper-inner' => 'backdrop-filter: blur({{SIZE}}{{UNIT}});',
                ],
            ]
        );

        $this->end_controls_section();


        $this->start_controls_section('section_style_thumb',
            [
                'label' => esc_html__('Thumb', 'newsfy'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]);

        $this->add_responsive_control('thumb_padding',
            [
                'label' => esc_html__('Padding', 'newsfy'),
                'type' => Controls_Manager::DIMENSIONS,
                'selectors' => [
                    '{{WRAPPER}} .thumb-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]);

        $this->add_responsive_control('thumb_content_padding',
            [
                'label' => esc_html__('Content Padding', 'newsfy'),
                'type' => Controls_Manager::DIMENSIONS,
                'selectors' => [
                    '{{WRAPPER}} .thumb-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]);

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'thumb_border',
                'label' => esc_html__( 'Border', 'newsfy' ),
                'selector' => '{{WRAPPER}} .thumb-wrapper',
            ]
        );

        $this->add_control('thumb_border_radius',
            [
                'label' => esc_html__('Border Radius', 'newsfy'),
                'type' => Controls_Manager::DIMENSIONS,
                'selectors' => [
                    '{{WRAPPER}} .thumb-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]);

        $this->add_control(
            'thumb_opacity',
            [
                'label'     => esc_html__( 'Opacity', 'newsfy' ),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 0,
                        'max' => 1,
                        'step' => 0.01,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .thumb-wrapper' => 'opacity: {{SIZE}};',
                ],
            ]
        );

        $this->add_control(
            'thumb_blur_bg',
            [
                'label'     => esc_html__( 'Blur Background', 'newsfy' ),
				'description'   => esc_html__( 'Need a low opacity background.', 'newsfy' ),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 0,
                        'max' => 30,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .thumb-wrapper' => 'backdrop-filter: blur({{SIZE}}{{UNIT}});',
                ],
                'condition' => [
                    'thumb_layout' => ['content', 'image-left'],
                ],
            ]
        );

        $this->add_control('thumb_bar_color',
            [
                'label' => esc_html__('Progress Bar Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .thumb-wrapper::after' => 'background: {{VALUE}};',
                ],
                'condition' => [
                    'disable_thumb_bar' => '',
                ],
            ]);

        $this->add_group_control(
            Group_Control_Typography::get_type(), [
                'label'      => esc_html__('Title Typography', 'newsfy'),
                'name'		 => 'thumb_title_typography',
                'selector'	 => '{{WRAPPER}} .thumb-title',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(), [
                'label'      => esc_html__('Date Typography', 'newsfy'),
                'name'		 => 'thumb_date_typography',
                'selector'	 => '{{WRAPPER}} .thumb-date',
            ]
        );

        $this->add_control(
            'heading_thumb_img',
            [
                'label'     => esc_html__( 'Image', 'newsfy' ),
                'type'      => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'thumb_img_border',
                'label' => esc_html__( 'Border', 'newsfy' ),
                'selector' => '{{WRAPPER}} .thumb-wrapper .image-wrapper',
            ]
        );

        $this->add_control('thumb_img_border_radius',
            [
                'label' => esc_html__('Image Border Radius', 'newsfy'),
                'type' => Controls_Manager::DIMENSIONS,
                'selectors' => [
                    '{{WRAPPER}} .image-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]);

        $this->start_controls_tabs( 'tabs_thumb' );

        /* Normal */
        $this->start_controls_tab(
            'tab_thumb_normal',
            [
                'label' => esc_html__( 'Normal', 'newsfy' ),
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'thumb_img_overlay',
                'exclude' => [ 'image' ],
                'selector' => '{{WRAPPER}} .thumb-wrapper .image-wrapper::before',
                'condition' => [
                    'thumb_layout' => ['image', 'image-cover']
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'thumb_bg',
                'exclude' => [ 'image' ],
                'selector' => '{{WRAPPER}} .thumb-wrapper',
                'condition' => [
                    'thumb_layout!' => ['image', 'image-cover']
                ]
            ]
        );

        $this->add_control('thumb_title_color',
            [
                'label' => esc_html__('Title Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .thumb-title' => 'color: {{VALUE}};',
                ],
            ]);

        $this->add_control('thumb_date_color',
            [
                'label' => esc_html__('Date Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .thumb-date' => 'color: {{VALUE}};',
                ],
            ]);


        $this->add_control(
            'heading_tab_thumb_normal_dark',
            [
                'label'     => esc_html__( 'Dark Mode', 'newsfy' ),
                'type'      => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'thumb_border_color_dark_mode',
            [
                'label' => esc_html__('Border Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    'html[scheme="dark"] {{WRAPPER}} .thumb-wrapper' => 'border-color: {{VALUE}};',
                ],
                'condition' => [
                    'thumb_border_border!' => ''
                ]
            ]
        );

        $this->add_control(
            'thumb_img_border_color_dark_mode',
            [
                'label' => esc_html__('Image Border Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    'html[scheme="dark"] {{WRAPPER}} .thumb-wrapper .image-wrapper' => 'border-color: {{VALUE}};',
                ],
                'condition' => [
                    'thumb_img_border_border!' => ''
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'thumb_img_overlay_dark_mode',
                'exclude' => [ 'image' ],
                'selector' => 'html[scheme="dark"] {{WRAPPER}} .thumb-wrapper .image-wrapper::before',
                'condition' => [
                    'thumb_layout' => ['image', 'image-cover']
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'thumb_bg_dark_mode',
                'exclude' => [ 'image' ],
                'selector' => 'html[scheme="dark"] {{WRAPPER}} .thumb-wrapper',
                'condition' => [
                    'thumb_layout!' => ['image', 'image-cover']
                ]
            ]
        );

        $this->add_control('thumb_title_color_dark_mode',
            [
                'label' => esc_html__('Title Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    'html[scheme="dark"] {{WRAPPER}} .thumb-title' => 'color: {{VALUE}};',
                ],
            ]);

        $this->add_control('thumb_date_color_dark_mode',
            [
                'label' => esc_html__('Date Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    'html[scheme="dark"] {{WRAPPER}} .thumb-date' => 'color: {{VALUE}};',
                ],
            ]);


        $this->end_controls_tab();

        /* Dark Mode */
        $this->start_controls_tab(
            'tab_thumb_active',
            [
                'label' => esc_html__( 'Active', 'newsfy' ),
            ]
        );

        $this->add_control(
            'thumb_active_border_color',
            [
                'label' => esc_html__('Border Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .thumb-wrapper[class*="-active"]' => 'border-color: {{VALUE}};',
                ],
                'condition' => [
                    'thumb_border_border!' => ''
                ]
            ]
        );

        $this->add_control(
            'thumb_img_active_border_color',
            [
                'label' => esc_html__('Image Border Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .thumb-wrapper[class*="-active"] .image-wrapper' => 'border-color: {{VALUE}};',
                ],
                'condition' => [
                    'thumb_img_border_border!' => ''
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'thumb_active_img_overlay',
                'exclude' => [ 'image' ],
                'selector' => '{{WRAPPER}} .thumb-wrapper[class*="-active"] .image-wrapper::before',
                'condition' => [
                    'thumb_layout' => ['image', 'image-cover']
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'thumb_active_bg',
                'exclude' => [ 'image' ],
                'selector' => '{{WRAPPER}} .thumb-wrapper[class*="-active"]',
                'condition' => [
                    'thumb_layout!' => ['image', 'image-cover']
                ]
            ]
        );

        $this->add_control('thumb_active_title_color',
            [
                'label' => esc_html__('Title Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .thumb-wrapper[class*="-active"] .thumb-title' => 'color: {{VALUE}};',
                ],
            ]);

        $this->add_control('thumb_active_date_color',
            [
                'label' => esc_html__('Date Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .thumb-wrapper[class*="-active"] .thumb-date' => 'color: {{VALUE}};',
                ],
            ]);


        $this->add_control(
            'heading_tab_thumb_active_dark',
            [
                'label'     => esc_html__( 'Dark Mode', 'newsfy' ),
                'type'      => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'thumb_active_border_color_dark_mode',
            [
                'label' => esc_html__('Border Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    'html[scheme="dark"] {{WRAPPER}} .thumb-wrapper[class*="-active"]' => 'border-color: {{VALUE}};',
                ],
                'condition' => [
                    'thumb_border_border!' => ''
                ]
            ]
        );

        $this->add_control(
            'thumb_img_active_border_color_dark_mode',
            [
                'label' => esc_html__('Image Border Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    'html[scheme="dark"] {{WRAPPER}} .thumb-wrapper[class*="-active"] .image-wrapper' => 'border-color: {{VALUE}};',
                ],
                'condition' => [
                    'thumb_img_border_border!' => ''
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'thumb_active_img_overlay_dark_mode',
                'exclude' => [ 'image' ],
                'selector' => 'html[scheme="dark"] {{WRAPPER}} .thumb-wrapper[class*="-active"] .image-wrapper::before',
                'condition' => [
                    'thumb_layout' => ['image', 'image-cover']
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'thumb_active_bg_dark_mode',
                'exclude' => [ 'image' ],
                'selector' => 'html[scheme="dark"] {{WRAPPER}} .thumb-wrapper[class*="-active"]',
                'condition' => [
                    'thumb_layout!' => ['image', 'image-cover']
                ]
            ]
        );

        $this->add_control('thumb_active_title_color_dark_mode',
            [
                'label' => esc_html__('Title Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    'html[scheme="dark"] {{WRAPPER}} .thumb-wrapper[class*="-active"] .thumb-title' => 'color: {{VALUE}};',
                ],
            ]);

        $this->add_control('thumb_active_date_color_dark_mode',
            [
                'label' => esc_html__('Date Color', 'newsfy'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    'html[scheme="dark"] {{WRAPPER}} .thumb-wrapper[class*="-active"] .thumb-date' => 'color: {{VALUE}};',
                ],
            ]);

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

        $this->end_controls_section();

    }


    protected function register_controls() {

        $this->register_query_builder_controls();
        $this->register_post_controls();
        $this->register_slider_controls();
        $this->register_carousel_nav_controls('slider');
        $this->register_thumb_controls();

        $this->register_style_post_controls();
        $this->register_style_title_controls();
        $this->register_style_terms_controls();
        $this->register_style_meta_controls();
        $this->register_style_excerpt_controls();
        $this->register_style_read_more_controls();
        $this->register_style_carousel_nav_controls('slider');

    }


    protected function render_slider_header() {
        $settings        = $this->get_settings_for_display();

        $id = 'rivax-slider-' . $this->get_id();

        $this->add_render_attribute( 'slider', 'id', $id );
        $this->add_render_attribute( 'slider', 'class', 'rivax-posts-carousel-wrapper' );

        if ( $settings['carousel_pagination'] ) {
            $pagination_type = $settings['carousel_pagination_type'];
        } else {
            $pagination_type = '';
        }

        $slider_settings = [
            "autoplay"              => ( "yes" == $settings["slider_autoplay"] ) ? [ "delay" => $settings["slider_autoplay_speed"] ] : false,
            "loop"                  => ( $settings["slider_loop"] == "yes" ),
            "speed"                 => $settings["slider_speed"]["size"],
            "pauseOnMouseEnter"     => ( $settings["slider_pauseonhover"] == "yes" ),
            "grabCursor"            => ( $settings["slider_grab_cursor"] == "yes" ),
            "effect"                => $settings["carousel_effect"],
            "parallax"              => true,
            "loopedSlides"          => 6,
            "touchRatio"          => 0.2,
            "navigation"            => [
                "nextEl" => "#" . $id . " .carousel-nav-next",
                "prevEl" => "#" . $id . " .carousel-nav-prev",
            ],
            "pagination"            => [
                "el"             => "#" . $id . " .carousel-pagination",
                "type"           => $pagination_type,
                "clickable"      => "true",
                'dynamicBullets' => ( "yes" == $settings["carousel_dynamic_bullets"] ),
            ],
            "a11y"            => [
                "enabled"             => "false",
            ],
            "fadeEffect"            => [
                "crossFade" => true,
            ],

        ];


        $this->add_render_attribute('slider', 'data-settings', wp_json_encode(array_filter($slider_settings)) );

        ?>
        <div <?php $this->print_render_attribute_string( 'slider' ); ?>>
        <div class="swiper main-slider">
        <div class="swiper-wrapper">
        <?php
    }


    protected function render()
    {
        $settings = $this->get_settings_for_display();

        $widget_path_name = str_replace('rivax-', '', $this->get_name() );
        include RIVAX_THEME_DIR . '/elementor/templates/' . $widget_path_name . '/' . $widget_path_name . '.php';
    }

}