<?php
class TFPriceTable_Widget extends \Elementor\Widget_Base {

  public function get_name() {
        return 'tf-pricetable';
    }
    
    public function get_title() {
        return esc_html__( 'TF Price Table', 'themesflat-core' );
    }

    public function get_icon() {
        return 'eicon-price-table';
    }
    
    public function get_categories() {
        return [ 'themesflat_addons' ];
    }

    public function get_style_depends() {
        return ['tf-pricetable'];
    }

    protected function register_controls() {
        // Start Price Table Header  
            $this->start_controls_section( 
                'section_price_header',
                [
                    'label' => esc_html__('Header', 'themesflat-core'),
                ]
            );

            $this->add_control( 
                'style',
                [
                    'label' => esc_html__( 'Styles', 'norstar-core' ),
                    'type' => \Elementor\Controls_Manager::SELECT,
                    'default' => 'style1',
                    'options' => [
                        'style1' => esc_html__( 'Style 1', 'norstar-core' ),
                        'style2' => esc_html__( 'Style 2', 'norstar-core' ),
                    ],
                ]
            );

            $this->add_control(
                'active',
                [
                    'label' => esc_html__( 'Active', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::SELECT,
                    'default' => 'noactive',
                    'options' => [
                        'noactive'  => esc_html__( 'No', 'themesflat-core' ),
                        'setactive' => esc_html__( 'Yes', 'themesflat-core' ),
                    ],
                ]
            );

            $this->add_control(
                'price',
                [
                    'label' => esc_html__( 'Price', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'default' => esc_html__( '40', 'themesflat-core' ),
                ]
            );

            $this->add_control(
                'price_type',
                [
                    'label' => esc_html__( 'Price Type', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'default' => esc_html__( '$', 'themesflat-core' ),
                ]
            );

            $this->add_control(
                'time',
                [
                    'label' => esc_html__( 'Time', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'default' => esc_html__( 'Per Month', 'themesflat-core' ),
                ]
            );

            $this->add_control( 
                'show_badge',
                [
                    'label' => esc_html__( 'Show Badge', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::SWITCHER,
                    'label_on' => esc_html__( 'Show', 'themesflat-core' ),
                    'label_off' => esc_html__( 'Hide', 'themesflat-core' ),
                    'return_value' => 'yes',
                    'default' => 'no',
                ]
            );

            $this->add_control(
                'badge',
                [
                    'label' => esc_html__( 'Badge', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'default' => esc_html__( 'MOST POPULAR', 'themesflat-core' ),
                    'condition' => [
                        'show_badge'	=> 'yes',
                    ],
                ]
            );

            $this->add_control(
                'title',
                [
                    'label' => esc_html__( 'Title', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'default' => esc_html__( 'Standard', 'themesflat-core' ),
                ]
            );

            $this->end_controls_section();
        // /.End Price Table Header

        // Start Price Table Content  
            $this->start_controls_section( 
                'section_price_content',
                [
                    'label' => esc_html__('Content', 'themesflat-core'),
                ]
            );

            $repeater = new \Elementor\Repeater();

            $repeater->add_control(
                'item',
                [
                    'label' => esc_html__( 'Item', 'tf-addon-for-elementer' ),
                    'type' => \Elementor\Controls_Manager::HEADING,
                ]
            );

            $repeater->add_control(
                'icon',
                [
                    'label' => esc_html__( 'Icon', 'tf-addon-for-elementer' ),
                    'type' => \Elementor\Controls_Manager::ICONS,
                    'default' => [
                        'value' => 'fa fa-check',
                        'library' => 'theme_icon',
                    ],
                ]
            );

            $repeater->add_control(
                'icon_color',
                [
                    'label' => esc_html__( 'Icon Color', 'tf-addon-for-elementer' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} {{CURRENT_ITEM}} .wrap-icon i' => 'color: {{VALUE}}',
                        '{{WRAPPER}} {{CURRENT_ITEM}} .wrap-icon svg' => 'fill: {{VALUE}}',
                    ],
                ]
            );       
            
            $repeater->add_control(
                'icon_color_bg',
                [
                    'label' => esc_html__( 'Icon Background Color', 'tf-addon-for-elementer' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} {{CURRENT_ITEM}} .wrap-icon' => 'background: {{VALUE}};border-color: {{VALUE}}',
                    ],
                ]
            );

            $repeater->add_control(
                'text',
                [
                    'label' => esc_html__( 'Text', 'tf-addon-for-elementer' ),
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'default' => esc_html__( 'Content price', 'tf-addon-for-elementer' ),
                    'label_block' => true,
                ]
            );

            $repeater->add_control(
                'text_color',
                [
                    'label' => esc_html__( 'Text Color', 'tf-addon-for-elementer' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} {{CURRENT_ITEM}} .text' => 'color: {{VALUE}}',
                    ],
                ]
            );

            $this->add_control(
                'items',
                [
                    'label' => esc_html__( 'Items', 'tf-addon-for-elementer' ),
                    'type' => \Elementor\Controls_Manager::REPEATER,
                    'show_label' => true,
                    'fields' => $repeater->get_controls(),
                    'default' => [
                        [   
                            'text' => esc_html__( 'Listing free', 'tf-addon-for-elementer' ),
                        ],
                        [   
                            'text' => esc_html__( 'Support 24/7', 'tf-addon-for-elementer' ),
                        ],
                        [   
                            'text' => esc_html__( 'Quick access to customers', 'tf-addon-for-elementer' ),
                        ],
                        [   
                            'text' => esc_html__( 'Auto refresh ads', 'tf-addon-for-elementer' ),
                        ],
                    ],
                    'title_field' => '{{{ text }}}',
                ]
            );            

            $this->end_controls_section();
        // /.End Price Table Content

        // Start Price Table Button  
            $this->start_controls_section( 
                'section_price_button',
                [
                    'label' => esc_html__('Button', 'themesflat-core'),
                ]
            );
            $this->add_control(
                'button_text',
                [
                    'label' => esc_html__( 'Button Text', 'tf-addon-for-elementer' ),
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'default' => esc_html__( 'Get started', 'tf-addon-for-elementer' ),
                ]
            );

            $this->add_control(
                'post_icon_readmore',
                [
                    'label' => esc_html__( 'Post Icon ', 'norstar' ),
                    'type' => \Elementor\Controls_Manager::ICONS,
                ]
            );

            $this->add_control(
                'link',
                [
                    'label' => esc_html__( 'Link', 'tf-addon-for-elementer' ),
                    'type' => \Elementor\Controls_Manager::URL,
                    'placeholder' => esc_html__( 'https://your-link.com', 'tf-addon-for-elementer' ),
                    'default' => [
                        'url' => '#',
                        'is_external' => false,
                        'nofollow' => false,
                    ],
                ]
            );
            $this->end_controls_section();
        // /.End Price Table Button

        // Start Style General
            $this->start_controls_section( 'section_style_general',
                [
                    'label' => esc_html__( 'General', 'themesflat-core' ),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );    

            $this->add_control(
				'layout_align_table',
				[
					'label' => esc_html__( 'Alignment', 'themesflat-core' ),
					'type' => \Elementor\Controls_Manager::CHOOSE,
					'options' => [
						'left'    => [
							'title' => esc_html__( 'Left', 'themesflat-core' ),
							'icon' => 'eicon-text-align-left',
						],
						'center' => [
							'title' => esc_html__( 'Center', 'themesflat-core' ),
							'icon' => 'eicon-text-align-center',
						],
						'right' => [
							'title' => esc_html__( 'Right', 'themesflat-core' ),
							'icon' => 'eicon-text-align-right',
						],
					],
					'selectors' => [
						'{{WRAPPER}} .tf-pricetable' => 'text-align: {{VALUE}}',
						'{{WRAPPER}} .tf-pricetable .inner-content-list .item' => 'justify-content: {{VALUE}}',
					],
				]
			);

            $this->add_group_control(
                \Elementor\Group_Control_Box_Shadow::get_type(),
                [
                    'name' => 'box_shadow',
                    'label' => esc_html__( 'Box Shadow', 'themesflat-core' ),
                    'selector' => '{{WRAPPER}} .tf-pricetable',
                ]
            );
            $this->add_group_control(
                \Elementor\Group_Control_Border::get_type(),
                [
                    'name' => 'border',
                    'label' => esc_html__( 'Border', 'themesflat-core' ),
                    'selector' => '{{WRAPPER}} .tf-pricetable',
                ]
            ); 

            $this->add_responsive_control( 
				'padding_table',
				[
					'label' => esc_html__( 'Padding', 'themesflat-core' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'selectors' => [
						'{{WRAPPER}} .tf-pricetable' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],					
				]
			);

            $this->add_responsive_control( 
				'margin_table',
				[
					'label' => esc_html__( 'Margin', 'themesflat-core' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'selectors' => [
						'{{WRAPPER}} .tf-pricetable' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],					
				]
			);

            $this->start_controls_tabs( 
                'background_style_tabs',
                [
 
                ]
                );
                $this->start_controls_tab( 
                    'background_style_normal_tab',
                    [
                        'label' => esc_html__( 'Normal', 'themesflat-core' ),
                    ] ); 

                    $this->add_control( 
                        'overlay_bg_color',
                        [
                            'label' => esc_html__( 'Background', 'themesflat-core' ),
                            'type' => \Elementor\Controls_Manager::COLOR,
                            'selectors' => [
                                '{{WRAPPER}} .tf-pricetable' => 'background-color: {{VALUE}};',              
                            ],
                        ]
                    );
                    $this->add_group_control(
                        \Elementor\Group_Control_Css_Filter::get_type(),
                        [
                            'name' => 'bg_image_css_filters',
                            'selector' => '{{WRAPPER}} .tf-pricetable',
                        ]
                    );
                $this->end_controls_tab();

                $this->start_controls_tab( 
                    'background_style_hover_tab',
                    [
                        'label' => esc_html__( 'Hover', 'themesflat-core' ),
                    ] );
                    $this->add_control( 
                        'overlay_bg_color_hover',
                        [
                            'label' => esc_html__( 'Background ', 'themesflat-core' ),
                            'type' => \Elementor\Controls_Manager::COLOR,
                            'selectors' => [
                                '{{WRAPPER}} .tf-pricetable:hover, {{WRAPPER}} .tf-pricetable.setactive' => 'background-color: {{VALUE}};',              
                            ],
                        ]
                    );
                    $this->add_control(
                        'background_blend_mode_hover',
                        [
                            'label' => esc_html__( 'Background Blend Mode', 'themesflat-core' ),
                            'type' => \Elementor\Controls_Manager::SELECT,
                            'options' => [
                                'normal'  => esc_html__( 'Normal', 'themesflat-core' ),
                                'multiply' => esc_html__( 'Multiply', 'themesflat-core' ),
                                'screen' => esc_html__( 'Screen', 'themesflat-core' ),
                                'overlay' => esc_html__( 'Overlay', 'themesflat-core' ),
                                'darken' => esc_html__( 'Darken', 'themesflat-core' ),
                                'lighten' => esc_html__( 'Lighten', 'themesflat-core' ),
                                'color-dodge' => esc_html__( 'Color Dodge', 'themesflat-core' ),
                                'saturation' => esc_html__( 'Saturation', 'themesflat-core' ),
                                'color' => esc_html__( 'Color', 'themesflat-core' ),
                                'luminosity' => esc_html__( 'Luminosity', 'themesflat-core' ),
                            ],
                            'selectors' => [
                                '{{WRAPPER}} .tf-pricetable:hover' => 'background-blend-mode: {{VALUE}};',              
                            ],
                            'condition' => [
                                'style' => 'style2',
                            ],
                        ]
                    );
                    $this->add_group_control(
                        \Elementor\Group_Control_Background::get_type(),
                        [
                            'name' => 'bg_image_hover',
                            'label' => esc_html__( 'Background', 'themesflat-core' ),
                            'types' => [ 'classic', 'gradient', 'video' ],
                            'selector' => '{{WRAPPER}} .tf-pricetable:hover',
                            'condition' => [
                                'style' => 'style2',
                            ],
                        ]
                    );
                $this->end_controls_tab();
            $this->end_controls_tabs();                

            $this->end_controls_section();    
        // /.End Style General

        // Start Style Header
            $this->start_controls_section( 'section_style_header',
                [
                    'label' => esc_html__( 'Header', 'themesflat-core' ),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );
            $this->add_control(
                'h_general1',
                [
                    'label' => esc_html__( 'Header', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::HEADING,
                ]
            );

            
            $this->add_responsive_control(
                'header_padding',
                [
                    'label' => esc_html__( 'Padding', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => [ 'px', '%', 'em' ],
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .header-price' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

            $this->add_responsive_control(
                'header_margin',
                [
                    'label' => esc_html__( 'Margin', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => [ 'px', '%', 'em' ],
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .header-price' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

            $this->add_control(
                'h_price',
                [
                    'label' => esc_html__( 'Price', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::HEADING,
                    'separator' => 'before',
                ]
            );
            $this->add_group_control( 
                \Elementor\Group_Control_Typography::get_type(),
                [
                    'name' => 'price_typography',
                    'label' => esc_html__( 'Typography', 'themesflat-core' ),
                    'selector' => '{{WRAPPER}} .tf-pricetable .price',
                ]
            );

            $this->add_control( 
                'price_color',
                [
                    'label' => esc_html__( ' Color', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .price' => 'color: {{VALUE}}',              
                    ],
                ]
            );
            $this->add_control( 
                'price_color_hover',
                [
                    'label' => esc_html__( 'Color Hover', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable:hover .price' => 'color: {{VALUE}}',     
                        '{{WRAPPER}} .tf-pricetable.setactive .price' => 'color: {{VALUE}}',          
                    ],
                ]
            );

            $this->add_control(
                'h_time',
                [
                    'label' => esc_html__( 'Time', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::HEADING,
                    'separator' => 'before',
                ]
            );
            $this->add_group_control( 
                \Elementor\Group_Control_Typography::get_type(),
                [
                    'name' => 'time_typography',
                    'label' => esc_html__( 'Typography', 'themesflat-core' ),
                    'selector' => '{{WRAPPER}} .tf-pricetable .time',
                ]
            );  
            $this->add_control( 
                'time_color',
                [
                    'label' => esc_html__( ' Color', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .time' => 'color: {{VALUE}}',              
                    ],
                ]
            );
            $this->add_control( 
                'time_color_hover',
                [
                    'label' => esc_html__( 'Color Hover', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable:hover .time' => 'color: {{VALUE}}', 
                        '{{WRAPPER}} .tf-pricetable.setactive .time' => 'color: {{VALUE}}',               
                    ],
                ]
            );

            $this->add_control(
                'h_price-type',
                [
                    'label' => esc_html__( 'Price Type', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::HEADING,
                    'separator' => 'before',
                ]
            );
            $this->add_group_control( 
                \Elementor\Group_Control_Typography::get_type(),
                [
                    'name' => 'price-type_typography',
                    'label' => esc_html__( 'Typography', 'themesflat-core' ),
                    'selector' => '{{WRAPPER}} .tf-pricetable .price-type',
                ]
            ); 
            $this->add_control( 
                'price-type_color',
                [
                    'label' => esc_html__( ' Color', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .price-type' => 'color: {{VALUE}}',              
                    ],
                ]
            );

            $this->add_control( 
                'price-type_color_hover',
                [
                    'label' => esc_html__( ' Color Hover', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable:hover .price-type' => 'color: {{VALUE}}',   
                        '{{WRAPPER}} .tf-pricetable.setactive .price-type' => 'color: {{VALUE}}',           
                    ],
                ]
            );

            $this->add_control(
                'h_title',
                [
                    'label' => esc_html__( 'Title', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::HEADING,
                    'separator' => 'before',
                ]
            );
            $this->add_group_control( 
                \Elementor\Group_Control_Typography::get_type(),
                [
                    'name' => 'title_typography',
                    'label' => esc_html__( 'Typography', 'themesflat-core' ),
                    'selector' => '{{WRAPPER}} .tf-pricetable .title',
                ]
            );
            $this->add_control( 
                'title_color',
                [
                    'label' => esc_html__( ' Color', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .title' => 'color: {{VALUE}}',              
                    ],
                ]
            );

            $this->add_control( 
                'title_color_hover',
                [
                    'label' => esc_html__( 'Hover', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable:hover .title, {{WRAPPER}} .tf-pricetable.setactive .title' => 'color: {{VALUE}}',              
                    ],
                ]
            );

            $this->add_control(
                'h_subtitle',
                [
                    'label' => esc_html__( 'SubTitle', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::HEADING,
                    'separator' => 'before',
                ]
            );
            $this->add_group_control( 
                \Elementor\Group_Control_Typography::get_type(),
                [
                    'name' => 'subtitle_typography',
                    'label' => esc_html__( 'Typography', 'themesflat-core' ),
                    'selector' => '{{WRAPPER}} .tf-pricetable .subtitle',
                ]
            );
            $this->add_control( 
                'subtitle_color',
                [
                    'label' => esc_html__( 'Color', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .subtitle' => 'color: {{VALUE}}',              
                    ],
                ]
            );
            $this->add_control( 
                'subtitle_color_hover',
                [
                    'label' => esc_html__( 'Hover', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable:hover .subtitle, {{WRAPPER}} .tf-pricetable.setactive .subtitle' => 'color: {{VALUE}}',              
                    ],
                ]
            );
            $this->end_controls_section();    
        // /.End Style Header

        // Start Style Content List
            $this->start_controls_section( 'section_style_content',
                [
                    'label' => esc_html__( 'Content', 'themesflat-core' ),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );
            $this->add_control(
                'h_general_content',
                [
                    'label' => esc_html__( 'Content', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::HEADING,
                ]
            );

            $this->add_control( 
                'content_bg_color',
                [
                    'label' => esc_html__( 'Background', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'default' => '',
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .content-list' => 'background-color: {{VALUE}}',               
                    ],
                ]
            );
            $this->add_responsive_control(
                'content_padding',
                [
                    'label' => esc_html__( 'Padding', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => [ 'px', '%', 'em' ],
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .content-list' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

            $this->add_control(
                'h_content_list',
                [
                    'label' => esc_html__( 'List', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::HEADING,
                ]
            );
            $this->add_control(
                'space_between',
                [
                    'label' => esc_html__( 'Space Between', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::SLIDER,
                    'size_units' => [ 'px' ],
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 100,
                            'step' => 1,
                        ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .content-list .item' => 'padding-top: {{SIZE}}{{UNIT}};padding-bottom: {{SIZE}}{{UNIT}};',
                    ],
                ]
            );    
            $this->add_responsive_control(
                'icon_size_over',
                [
                    'label' => esc_html__( 'Icon Size Over', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::SLIDER,
                    'size_units' => [ 'px' ],
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 100,
                            'step' => 1,
                        ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .wrap-icon' => ' width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',                        
                    ],
                ]
            );    
            $this->add_responsive_control( 
                'icon_size_over_radius',
                [
                    'label' => esc_html__( 'Border Radius Over', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => [ 'px', '%', 'em' ],
                   
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .wrap-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );      
            $this->add_control(
                'backgroud_color_hover',
                [
                    'label' => esc_html__( 'Background Over', 'tf-addon-for-elementer' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .wrap-icon' => 'background: {{VALUE}}',
                    ],
                ]
            );   
            $this->add_responsive_control(
                'icon_size',
                [
                    'label' => esc_html__( 'Icon Size', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::SLIDER,
                    'size_units' => [ 'px' ],
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 100,
                            'step' => 1,
                        ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .wrap-icon i' => 'font-size: {{SIZE}}{{UNIT}};',                        
                        '{{WRAPPER}} .tf-pricetable .wrap-icon svg' => 'width: {{SIZE}}{{UNIT}};',
                        '{{WRAPPER}} .tf-pricetable.style1 .wrap-icon' => 'width: calc( {{SIZE}}{{UNIT}} + 5px );display: inline-block;',
                    ],
                ]
            );
            $this->add_control(
                'icon_list_color_hover',
                [
                    'label' => esc_html__( 'Icon Hover Color', 'tf-addon-for-elementer' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable:hover .wrap-icon i, {{WRAPPER}} .tf-pricetable.setactive .wrap-icon i' => 'color: {{VALUE}}',
                    ],
                ]
            );
            $this->add_group_control( 
                \Elementor\Group_Control_Typography::get_type(),
                [
                    'name' => 'text_typography',
                    'label' => esc_html__( 'Typography Text', 'themesflat-core' ),
                    'selector' => '{{WRAPPER}} .tf-pricetable .text',
                ]
            );

            $this->add_control(
                'text_list_color',
                [
                    'label' => esc_html__( 'Text Color', 'tf-addon-for-elementer' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .text' => 'color: {{VALUE}}',
                    ],
                ]
            );
            $this->add_control(
                'text_list_color_hover',
                [
                    'label' => esc_html__( 'Text Color Hover', 'tf-addon-for-elementer' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable:hover .text' => 'color: {{VALUE}}',
                        '{{WRAPPER}} .tf-pricetable.setactive .text' => 'color: {{VALUE}}',
                    ],
                ]
            );
            $this->add_control(
                'text_indent',
                [
                    'label' => esc_html__( 'Text Indent', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::SLIDER,
                    'size_units' => [ 'px' ],
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 100,
                            'step' => 1,
                        ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .content-list .text' => 'padding-left: {{SIZE}}{{UNIT}};',
                    ],
                ]
            );             

            $this->end_controls_section();    
        // /.End Style Content List

        // Start Style Button
            $this->start_controls_section( 'section_style_button',
                [
                    'label' => esc_html__( 'Button', 'themesflat-core' ),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );
            $this->add_group_control( 
                \Elementor\Group_Control_Typography::get_type(),
                [
                    'name' => 'btn_typography',
                    'label' => esc_html__( 'Typography Text', 'themesflat-core' ),
                    'selector' => '{{WRAPPER}} .tf-pricetable .wrap-button a',
                ]
            );

            $this->add_responsive_control(
                'btn_padding',
                [
                    'label' => esc_html__( 'Padding', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => [ 'px', '%', 'em' ],
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .wrap-button a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );
            $this->add_responsive_control(
                'btn_margin',
                [
                    'label' => esc_html__( 'Margin', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => [ 'px', '%', 'em' ],
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .wrap-button a' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

            $this->add_responsive_control(
                'btn_border_radius',
                [
                    'label' => esc_html__( 'Border Radius', 'themesflat-core' ),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => [ 'px', '%', 'em' ],
                    'selectors' => [
                        '{{WRAPPER}} .tf-pricetable .wrap-button a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

            $this->add_group_control( 
                \Elementor\Group_Control_Border::get_type(),
                [
                    'name' => 'fbtn_border_border',
                    'label' => esc_html__( 'Border', 'themesflat-core' ),
                    'selector' => '{{WRAPPER}} .tf-pricetable .wrap-button a',
                ]
            );

            $this->start_controls_tabs( 'tabs_btn' );
                $this->start_controls_tab( 'tab_btn_normal', [ 'label' => esc_html__( 'Normal', 'tf-addon-for-elementer' ) ] );
                    $this->add_control( 
                        'btn_color',
                        [
                            'label' => esc_html__( 'Color', 'themesflat-core' ),
                            'type' => \Elementor\Controls_Manager::COLOR,
                            'selectors' => [
                                '{{WRAPPER}} .tf-pricetable .wrap-button a' => 'color: {{VALUE}}',              
                            ],
                        ]
                    ); 
                    $this->add_control( 
                        'btn_bgcolor',
                        [
                            'label' => esc_html__( 'Background', 'themesflat-core' ),
                            'type' => \Elementor\Controls_Manager::COLOR,
                            'selectors' => [
                                '{{WRAPPER}} .tf-pricetable .wrap-button a' => 'background-color: {{VALUE}}; border-color: {{VALUE}}',     
                            ],
                        ]
                    );

                    $this->add_control( 
                        'btn_bd_color',
                        [
                            'label' => esc_html__( 'Border Color', 'themesflat-core' ),
                            'type' => \Elementor\Controls_Manager::COLOR,
                            'selectors' => [
                                '{{WRAPPER}} .tf-pricetable .wrap-button a' => 'border-color: {{VALUE}}',              
                            ],
                        ]
                    ); 
                     
                $this->end_controls_tab();
                $this->start_controls_tab( 'tab_btn_hover', [ 'label' => esc_html__( 'Hover', 'tf-addon-for-elementer' ) ] );
                    $this->add_control( 
                        'btn_color_hover',
                        [
                            'label' => esc_html__( 'Color', 'themesflat-core' ),
                            'type' => \Elementor\Controls_Manager::COLOR,
                            'selectors' => [
                                '{{WRAPPER}} .tf-pricetable .wrap-button a:hover, .tf-pricetable.setactive .wrap-button a' => 'color: {{VALUE}}',              
                            ],
                        ]
                    );
                    $this->add_control( 
                        'btn_bgcolor_hover',
                        [
                            'label' => esc_html__( 'Background', 'themesflat-core' ),
                            'type' => \Elementor\Controls_Manager::COLOR,
                            'selectors' => [
                                '{{WRAPPER}} .tf-pricetable .wrap-button a span,{{WRAPPER}} .tf-pricetable.setactive .wrap-button a span' => 'background-color: {{VALUE}}',              
                                '{{WRAPPER}} .tf-pricetable .wrap-button a:hover ' => 'border-color: {{VALUE}}',              
                            ],
                        ]
                    );
                    $this->add_control( 
                        'btn_bd_color2',
                        [
                            'label' => esc_html__( 'Border Color', 'themesflat-core' ),
                            'type' => \Elementor\Controls_Manager::COLOR,
                            'selectors' => [
                                '{{WRAPPER}} .tf-pricetable .wrap-button a:hover' => 'border-color: {{VALUE}}',              
                            ],
                        ]
                    ); 
                $this->end_controls_tab();
            $this->end_controls_tabs();
            $this->end_controls_section();    
        // /.End Style Button

         // Start Style Badge
         $this->start_controls_section( 'section_style_badge',
         [
             'label' => esc_html__( 'Badge', 'themesflat-core' ),
             'tab' => \Elementor\Controls_Manager::TAB_STYLE,
         ]
     );
     $this->add_group_control( 
         \Elementor\Group_Control_Typography::get_type(),
         [
             'name' => 'badge_typography',
             'label' => esc_html__( 'Typography', 'themesflat-core' ),
             'selector' => '{{WRAPPER}} .tf-pricetable .badge-table',
         ]
     );

     $this->add_responsive_control(
         'badge_padding',
         [
             'label' => esc_html__( 'Padding', 'themesflat-core' ),
             'type' => \Elementor\Controls_Manager::DIMENSIONS,
             'size_units' => [ 'px', '%', 'em' ],
             'selectors' => [
                 '{{WRAPPER}} .tf-pricetable .badge-table' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
             ],
         ]
     );
     $this->add_responsive_control(
         'badge_margin',
         [
             'label' => esc_html__( 'Margin', 'themesflat-core' ),
             'type' => \Elementor\Controls_Manager::DIMENSIONS,
             'size_units' => [ 'px', '%', 'em' ],
             'selectors' => [
                 '{{WRAPPER}} .tf-pricetable .badge-table' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
             ],
         ]
     );

     $this->add_responsive_control(
         'badge_border_radius',
         [
             'label' => esc_html__( 'Border Radius', 'themesflat-core' ),
             'type' => \Elementor\Controls_Manager::DIMENSIONS,
             'size_units' => [ 'px', '%', 'em' ],
             'selectors' => [
                 '{{WRAPPER}} .tf-pricetable .badge-table' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
             ],
         ]
     );
 
     $this->add_control( 
        'badge_color',
        [
            'label' => esc_html__( 'Color', 'themesflat-core' ),
            'type' => \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .tf-pricetable .badge-table' => 'color: {{VALUE}}',              
            ],
        ]
    );
    $this->add_control( 
        'badge_bgcolor',
        [
            'label' => esc_html__( 'Background Color', 'themesflat-core' ),
            'type' => \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .tf-pricetable .badge-table' => 'Background: {{VALUE}}',              
            ],
        ]
    );
     $this->end_controls_section();    
 // /.End Style Button

    }

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

        $this->add_render_attribute( 'tf_pricetable', ['id' => "tf-pricetable-{$this->get_id()}", 'class' => ['tf-pricetable', $settings['active'], $settings['style']],  'data-tabid' => $this->get_id()] );  

        $header = $content = $button = $subtitle = $subtitle2 = $icon =  $item_list = $number_order = $time = '';

        foreach ( $settings['items'] as $index => $item ) {
            $item_list .= '<div class="item elementor-repeater-item-' . $item['_id'] . '">
                            <span class="wrap-icon">'.\Elementor\Addon_Elementor_Icon_manager_norstar::render_icon( $item['icon'] ).'</span>
                            <span class="text">'.$item['text'].'</span>
                        </div>';
        }
        $icon = \Elementor\Addon_Elementor_Icon_manager_norstar::render_icon( $settings['post_icon_readmore'], [ 'aria-hidden' => 'true' ] );
        $price_type = $settings['price_type'] ? '<span class="price-type">'.$settings['price_type'].'</span>' : '';
        $price = $settings['price'] ? '<span class="price">'.$settings['price'].'</span>' : '0';
        $title = $settings['title'] ? '<div class="title">'.$settings['title'].'</div>' : '';
        $badge = $settings['badge'] ? '<div class="badge-table">'.$settings['badge'].'</div>' : '';
       
        $time = '<div class="time">'.$settings['time'].'</div>';

        if ($settings['style'] == 'style2') {
            $header = sprintf( '<div class="header-price">
            %1$s
           <div class="content-price"> %4$s %2$s %3$s</div>
        </div>',$title,$price,$time,$price_type);
        } else {
            $header = sprintf( '<div class="header-price">
            %1$s
           <div class="content-price"> %4$s %2$s </div>
           %3$s
       </div>',$title,$price,$time,$price_type);
        }

        $content = sprintf( '<div class="content-list">
                                <div class="inner-content-list">%1$s</div>
                            </div>',$item_list);

        $target = $settings['link']['is_external'] ? ' target="_blank"' : '';
        $nofollow = $settings['link']['nofollow'] ? ' rel="nofollow"' : '';
        $button = sprintf( '<div class="wrap-button">
                                <a href="%2$s" class="tf-btn" %3$s %4$s>%1$s %5$s <span></span></a>
                            </div>',$settings['button_text'], $settings['link']['url'], $target, $nofollow, $icon);

            echo sprintf ( 
                '
                <div %1$s>  
                    %5$s
                    %2$s
                    %3$s
                    %4$s
                </div>',
                    $this->get_render_attribute_string('tf_pricetable'),
                    $header,
                    $content,
                    $button,
                    $badge

            );
    }

}