<?php
/**
 * Pricing Table
 *
 * @package UPPSAE
 */
namespace DynamicLayers\UPPSAE\Widgets\Pricing_Table;

use Elementor\Controls_Manager;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Widget_Base;
use Elementor\Repeater;
use Elementor\Icons_Manager;
use DynamicLayers\UPPSAE\Classes\Helper;

defined( 'ABSPATH' ) || die();

class Widget extends Widget_Base {

    public function __construct( $data = [], $args = null ) {
        parent::__construct( $data, $args );
        wp_register_script( 'modernizr', UPPSAE_ASSETS . '/js/modernizr-2.8.3.min.js', array( 'jquery' ), NULL, true );
        wp_register_script( 'uppsae-pricing-switcher', UPPSAE_ASSETS . '/js/pricing-switcher.js', array( 'jquery', 'modernizr' ), NULL, true );

    }

    /**
     * Get widget name.
     *
     * @since 1.0.0
     * @access public
     *
     * @return string Widget name.
     */
    public function get_name() {
        return 'uppsae-pricing-table-flip';
    }

    /**
     * Get widget title.
     *
     * @since 1.0.0
     * @access public
     *
     * @return string Widget title.
     */
    public function get_title() {
        return esc_html__( 'Pricing Plan Switcher', 'uppsae' );
    }

    public function get_custom_help_url() {
        return 'https://dynamiclayers.net';
    }

    /**
     * Get widget icon.
     *
     * @since 1.0.0
     * @access public
     *
     * @return string Widget icon.
     */
    public function get_icon() {
        return 'eicon-price-table';
    }

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

    public function get_keywords() {
        return ['pricing', 'table', 'list', 'uppsae'];
    }

    public function get_script_depends() {
        return [ 'uppsae-pricing-switcher', 'modernizr' ];
    }

    public function get_style_depends() {
        return ['uppsae-pricing-table'];
    }

    /**
     * Register content related controls
     */
    protected function register_controls() {

        $this->section_layout();
        $this->section_switcher();
        $this->section_pricing_tables();
        $this->style_wrapper();
        $this->style_pricing_item();
        $this->style_heading();
        $this->style_description();
        $this->style_switcher_btn();
        $this->style_badge();
        $this->style_pricing_head();
        $this->style_pricing_list();
        $this->style_button();

    }

    protected function section_layout() {
        
        $this->start_controls_section(
            '_layout_section',
            [
                'label' => esc_html__( 'Layout', 'uppsae' ),
            ]
        );

        $this->add_responsive_control(
            'layout',
            [
                'label'                => esc_html__( 'Layout', 'uppsae' ),
                'type'                 => Controls_Manager::CHOOSE,
                'options'              => [
                    'left'  => [
                        'title' => esc_html__( 'Left Align', 'uppsae' ),
                        'icon'  => 'eicon-h-align-left',
                    ],
                    'top'   => [
                        'title' => esc_html__( 'Top Align', 'uppsae' ),
                        'icon'  => 'eicon-v-align-top',
                    ],
                    'right' => [
                        'title' => esc_html__( 'Right Align', 'uppsae' ),
                        'icon'  => 'eicon-h-align-right',
                    ],
                ],
                'default'              => 'left',
                'toggle'               => false,
                'prefix_class'         => 'layout-',
                'selectors_dictionary' => [
                    'left'  => 'grid-template-columns: 1fr 2fr;',
                    'top'   => 'grid-template-columns: 1fr;',
                    'right' => 'grid-template-columns: 2fr 1fr;',
                ],
                'selectors'            => [
                    '{{WRAPPER}} .pricing-wrapper' => '{{VALUE}}',
                ],
            ]
        );

        $this->add_responsive_control(
            'switcher_text_align',
            [
                'label'     => esc_html__( 'Alignment', 'uppsae' ),
                'type'      => Controls_Manager::CHOOSE,
                'options'   => [
                    'left'   => [
                        'title' => esc_html__( 'Left', 'uppsae' ),
                        'icon'  => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__( 'Center', 'uppsae' ),
                        'icon'  => 'eicon-text-align-center',
                    ],
                    'right'  => [
                        'title' => esc_html__( 'Right', 'uppsae' ),
                        'icon'  => 'eicon-text-align-right',
                    ],
                ],
                'default'   => 'left',
                'toggle'    => false,
                'selectors' => [
                    '{{WRAPPER}} .pricing-wrapper, {{WRAPPER}} .cd-pricing-switcher' => 'text-align: {{VALUE}}',
                ],
            ]
        );

        $this->add_responsive_control(
            'pricing_col',
            [
                'label'           => __( 'Pricing Table Column', 'uppsae' ),
                'type'            => Controls_Manager::SLIDER,
                'range'           => [
                    'px' => [
                        'min'  => 1,
                        'max'  => 4,
                        'step' => 1,
                    ],
                ],
                'desktop_default' => [
                    'size' => 2,
                    'unit' => 'px',
                ],
                'tablet_default'  => [
                    'size' => 2,
                    'unit' => 'px',
                ],
                'mobile_default'  => [
                    'size' => 1,
                    'unit' => 'px',
                ],
                'selectors'       => [
                    '{{WRAPPER}} .cd-pricing-list' => 'grid-template-columns: repeat({{SIZE}}, 1fr);',
                ],
            ]
        );

        $this->add_responsive_control(
            'column_gap',
            [
                'label'     => __( 'Column Gap', 'uppsae' ),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min'  => 0,
                        'max'  => 150,
                        'step' => 1,
                    ],
                ],
                'default'   => [
                    'unit' => 'px',
                    'size' => 30,
                ],
                'selectors' => [
                    '{{WRAPPER}} .cd-pricing-list' => 'grid-gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

    protected function section_switcher() {
        $this->start_controls_section(
            '_switcher_section',
            [
                'label' => esc_html__( 'Switcher', 'uppsae' ),
            ]
        );

        $this->add_control(
            'heading',
            [
                'label'       => __( 'Heading', 'uppsae' ),
                'type'        => Controls_Manager::TEXT,
                'default'     => esc_html__( 'No Hidden Charges!', 'uppsae' ),
                'placeholder' => esc_html__( 'Heading...', 'uppsae' ),
                'label_block' => true,
            ]
        );

        $this->add_control(
            'heading_tag',
            [
                'label'   => esc_html__( 'Heading Tag', 'uppsae' ),
                'type'    => Controls_Manager::SELECT,
                'default' => 'h2',
                'options' => [
                    'h1' => esc_html__( 'H1', 'uppsae' ),
                    'h2' => esc_html__( 'H2', 'uppsae' ),
                    'h3' => esc_html__( 'H3', 'uppsae' ),
                    'h4' => esc_html__( 'H4', 'uppsae' ),
                    'h5' => esc_html__( 'H5', 'uppsae' ),
                    'h6' => esc_html__( 'H6', 'uppsae' )
                ],
                'condition' => [
                    'heading!' => '',
                ],
            ]
        );

        $this->add_control(
            'desc',
            [
                'label'       => esc_html__( 'Description', 'uppsae' ),
                'type'        => Controls_Manager::TEXTAREA,
                'rows'        => 5,
                'default'     => esc_html__( 'Financial experts support or help you to to find out which way you can raise your funds more.', 'uppsae' ),
                'placeholder' => esc_html__( 'Description...', 'uppsae' ),
            ]
        );

        $this->add_control(
            'm_text',
            [
                'label'       => __( 'Monthly Text', 'uppsae' ),
                'type'        => Controls_Manager::TEXT,
                'default'     => esc_html__( 'Monthly', 'uppsae' ),
                'placeholder' => esc_html__( 'Text...', 'uppsae' ),
            ]
        );

        $this->add_control(
            'y_text',
            [
                'label'       => __( 'Yearly Text', 'uppsae' ),
                'type'        => Controls_Manager::TEXT,
                'default'     => esc_html__( 'Yearly', 'uppsae' ),
                'placeholder' => esc_html__( 'Text...', 'uppsae' ),
            ]
        );

        $this->add_control(
            'active_action',
            [
                'label'   => esc_html__( 'Active Action', 'uppsae' ),
                'type'    => Controls_Manager::CHOOSE,
                'options' => [
                    'monthly' => [
                        'title' => esc_html__( 'Monthly', 'uppsae' ),
                        'icon'  => 'eicon-meetup',
                    ],
                    'yearly'  => [
                        'title' => esc_html__( 'Yearly', 'uppsae' ),
                        'icon'  => 'eicon-yoast',
                    ],
                ],
                'default' => 'monthly',
                'toggle'  => false,
            ]
        );

        $this->end_controls_section();
    }

    protected function section_pricing_tables() {

        $this->start_controls_section(
            '_pricing_tables_section',
            [
                'label' => esc_html__( 'Pricing Tables', 'uppsae' ),
            ]
        );

        $this->add_control(
            'currency',
            [
                'label'       => __( 'Currency Symbol', 'uppsae' ),
                'type'        => Controls_Manager::TEXT,
                'default'     => '$',
                'placeholder' => esc_html__( 'Symbol...', 'uppsae' ),
            ]
        );

        $repeater = new Repeater();

        $repeater->add_control(
            'plan_name',
            [
                'label'       => __( 'Plan Name', 'uppsae' ),
                'type'        => Controls_Manager::TEXT,
                'default'     => esc_html__( 'Starter Plan', 'uppsae' ),
                'placeholder' => esc_html__( 'Plan name...', 'uppsae' ),
                'label_block' => true,
            ]
        );

        $repeater->add_control(
            'icon',
            [
                'label'   => esc_html__( 'Icon', 'uppsae' ),
                'type'    => Controls_Manager::ICONS,
                'default' => [
                    'value'   => 'fas fa-star',
                    'library' => 'solid',
                ],
            ]
        );

        $repeater->add_control(
            'plan_list',
            [
                'label'       => esc_html__( 'Feature List', 'uppsae' ),
                'type'        => Controls_Manager::TEXTAREA,
                'rows'        => 5,
                'default'     => '',
                'placeholder' => esc_html__( 'Each list will seperate by new line', 'uppsae' ),
                'description' => '- With check icon: <b><em>icheck</em> list item</b>. <br/>- With cross icon: <b><em>icross</em> list item</b>',
            ]
        );

        $repeater->start_controls_tabs( 'style_tabs' );

        $repeater->start_controls_tab(
            'monthly_tab',
            [
                'label' => __( 'Monthly Plan', 'uppsae' ),
            ]
        );

        $repeater->add_control(
            'm_badge',
            [
                'label'   => esc_html__( 'Badge', 'uppsae' ),
                'type'    => Controls_Manager::CHOOSE,
                'options' => [
                    'yes' => [
                        'title' => esc_html__( 'Enable', 'uppsae' ),
                        'icon'  => 'eicon-eye',
                    ],
                    'no'  => [
                        'title' => esc_html__( 'Disable', 'uppsae' ),
                        'icon'  => 'eicon-disable-trash-o',
                    ],
                ],
                'default' => 'no',
                'toggle'  => false,
            ]
        );

        $repeater->add_control(
            'm_badge_text',
            [
                'label'       => __( 'Badge Text', 'uppsae' ),
                'type'        => Controls_Manager::TEXT,
                'default'     => esc_html__( 'Popular', 'uppsae' ),
                'placeholder' => esc_html__( 'Badge text...', 'uppsae' ),
                'condition'   => [
                    'm_badge' => 'yes',
                ],
            ]
        );

        $repeater->add_control(
            'm_price',
            [
                'label'   => esc_html__( 'Price', 'uppsae' ),
                'type'    => Controls_Manager::TEXT,
                'input_type' => 'number',
                'default' => 49,
            ]
        );

        $repeater->add_control(
            'm_text',
            [
                'label'       => __( 'Month Indicator', 'uppsae' ),
                'type'        => Controls_Manager::TEXT,
                'default'     => esc_html__( '/mo', 'uppsae' ),
                'placeholder' => esc_html__( '/mo...', 'uppsae' ),
            ]
        );

        $repeater->add_control(
            'm_btn_text',
            [
                'label'       => __( 'Button Text', 'uppsae' ),
                'type'        => Controls_Manager::TEXT,
                'default'     => esc_html__( 'Buy Now', 'uppsae' ),
                'placeholder' => esc_html__( 'Text...', 'uppsae' ),
            ]
        );

        $repeater->add_control(
            'm_btn_link',
            [
                'label'         => esc_html__( 'Link', 'uppsae' ),
                'type'          => Controls_Manager::URL,
                'placeholder'   => esc_html__( 'https://your-link.com', 'uppsae' ),
                'show_external' => true,
                'default'       => [
                    'url'         => '',
                    'is_external' => true,
                    'nofollow'    => true,
                ],
                'condition'     => [
                    'm_btn_text!' => '',
                ],
            ]
        );

        $repeater->add_control(
            'monthly_custom_style',
            [
                'label'        => esc_html__( 'Custom Style', 'uppsae' ),
                'type'         => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default'      => 'no',
                'separator'    => 'before',
            ]
        );

        $repeater->add_control(
            'monthly_bg_color',
            [
                'label'     => __( 'Background Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'default'   => '',
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .monthly-box' => 'background-color: {{VALUE}}',
                ],
                'condition' => [
                    'monthly_custom_style' => 'yes',
                ],
                'separator' => 'before',
            ]
        );

        $repeater->add_control(
            'monthly_text_color',
            [
                'label'     => __( 'Text Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'default'   => '',
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .monthly-box .pricing-head h4'               => 'color: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .monthly-box .pricing-head h3 .p-price'      => 'color: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .monthly-box .pricing-head h3 .p-price'      => 'color: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .monthly-box .pricing-head h3 span.currency' => 'color: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .monthly-box .pricing-head h3 span.cal-name' => 'color: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .monthly-box .pricing-head .ph-icon'         => 'color: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .monthly-box .pricing-head svg'              => 'fill: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .monthly-box ul.p-list li'                   => 'color: {{VALUE}}',
                ],
                'condition' => [
                    'monthly_custom_style' => 'yes',
                ],
                'separator' => 'before',
            ]
        );

        $repeater->add_control(
            'monthly_custom_btn_style',
            [
                'label'        => esc_html__( 'Custom Button Style', 'uppsae' ),
                'type'         => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default'      => 'no',
                'separator'    => 'before',
                'condition'    => [
                    'monthly_custom_style' => 'yes',
                    'm_btn_text!'          => '',
                ],
            ]
        );

        $repeater->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'      => 'monthy_btn_background',
                'label'     => esc_html__( 'Background', 'uppsae' ),
                'types'     => ['classic', 'gradient'],
                'selector'  => '{{WRAPPER}} {{CURRENT_ITEM}} .monthly-box .pricing-btn',
                'condition' => [
                    'monthly_custom_style'     => 'yes',
                    'monthly_custom_btn_style' => 'yes',
                    'm_btn_text!'              => '',
                ],
            ]
        );

        $repeater->add_control(
            'monthy_btn_text_color',
            [
                'label'     => esc_html__( 'Text Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .monthly-box .pricing-btn' => 'color: {{VALUE}}',
                ],
                'condition' => [
                    'monthly_custom_style'     => 'yes',
                    'monthly_custom_btn_style' => 'yes',
                    'm_btn_text!'              => '',
                ],
            ]
        );

        $repeater->add_control(
            'monthly_h_heading',
            [
                'label'     => __( 'Button Hover', 'plugin-name' ),
                'type'      => Controls_Manager::HEADING,
                'separator' => 'before',
                'condition' => [
                    'monthly_custom_style'     => 'yes',
                    'monthly_custom_btn_style' => 'yes',
                    'm_btn_text!'              => '',
                ],
            ]
        );

        $repeater->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'      => 'monthy_btn_hover_background',
                'label'     => esc_html__( 'Background', 'uppsae' ),
                'types'     => ['classic', 'gradient'],
                'selector'  => '{{WRAPPER}} {{CURRENT_ITEM}} .monthly-box .pricing-btn:before',
                'condition' => [
                    'monthly_custom_style'     => 'yes',
                    'monthly_custom_btn_style' => 'yes',
                    'm_btn_text!'              => '',
                ],
            ]
        );

        $repeater->add_control(
            'monthy_btn_text_hover_color',
            [
                'label'     => esc_html__( 'Text Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .monthly-box .pricing-btn:hover' => 'color: {{VALUE}}',
                ],
                'condition' => [
                    'monthly_custom_style'     => 'yes',
                    'monthly_custom_btn_style' => 'yes',
                    'm_btn_text!'              => '',
                ],
            ]
        );

        $repeater->end_controls_tab();

        $repeater->start_controls_tab(
            'yearly_tab',
            [
                'label' => __( 'Yearly Plan', 'uppsae' ),
            ]
        );

        $repeater->add_control(
            'y_badge',
            [
                'label'   => esc_html__( 'Badge', 'uppsae' ),
                'type'    => Controls_Manager::CHOOSE,
                'options' => [
                    'yes' => [
                        'title' => esc_html__( 'Enable', 'uppsae' ),
                        'icon'  => 'fas fa-eye',
                    ],
                    'no'  => [
                        'title' => esc_html__( 'Disable', 'uppsae' ),
                        'icon'  => 'fas fa-eye-slash',
                    ],
                ],
                'default' => 'no',
                'toggle'  => false,
            ]
        );

        $repeater->add_control(
            'y_badge_text',
            [
                'label'       => __( 'Badge Text', 'uppsae' ),
                'type'        => Controls_Manager::TEXT,
                'default'     => esc_html__( 'Popular', 'uppsae' ),
                'placeholder' => esc_html__( 'Badge text...', 'uppsae' ),
                'condition'   => [
                    'y_badge' => 'yes',
                ],
            ]
        );

        $repeater->add_control(
            'y_price',
            [
                'label'   => esc_html__( 'Price', 'uppsae' ),
                'type'    => Controls_Manager::TEXT,
                'input_type' => 'number',
                'default' => 499
            ]
        );

        $repeater->add_control(
            'y_text',
            [
                'label'       => __( 'Year Indicator', 'uppsae' ),
                'type'        => Controls_Manager::TEXT,
                'default'     => esc_html__( '/ye', 'uppsae' ),
                'placeholder' => esc_html__( '/ye...', 'uppsae' ),
            ]
        );

        $repeater->add_control(
            'y_btn_text',
            [
                'label'       => __( 'Button Text', 'uppsae' ),
                'type'        => Controls_Manager::TEXT,
                'default'     => esc_html__( 'Buy Now', 'uppsae' ),
                'placeholder' => esc_html__( 'Text...', 'uppsae' ),
            ]
        );

        $repeater->add_control(
            'y_btn_link',
            [
                'label'         => esc_html__( 'Link', 'uppsae' ),
                'type'          => Controls_Manager::URL,
                'placeholder'   => esc_html__( 'https://your-link.com', 'uppsae' ),
                'show_external' => true,
                'default'       => [
                    'url'         => '',
                    'is_external' => true,
                    'nofollow'    => true,
                ],
                'condition'     => [
                    'y_btn_text!' => '',
                ],
            ]
        );

        $repeater->add_control(
            'yearly_custom_style',
            [
                'label'        => esc_html__( 'Custom Style', 'uppsae' ),
                'type'         => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default'      => 'no',
                'separator'    => 'before',
            ]
        );

        $repeater->add_control(
            'yearly_bg_color',
            [
                'label'     => __( 'Background Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'default'   => '',
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .yearly-box' => 'background-color: {{VALUE}}',
                ],
                'condition' => [
                    'yearly_custom_style' => 'yes',
                ],
                'separator' => 'before',
            ]
        );

        $repeater->add_control(
            'yearly_text_color',
            [
                'label'     => __( 'Text Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'default'   => '',
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .yearly-box .pricing-head h4'               => 'color: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .yearly-box .pricing-head h3 .p-price'      => 'color: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .yearly-box .pricing-head h3 .p-price'      => 'color: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .yearly-box .pricing-head h3 span.currency' => 'color: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .yearly-box .pricing-head h3 span.cal-name' => 'color: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .yearly-box .pricing-head .ph-icon'         => 'color: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .yearly-box .pricing-head svg'              => 'fill: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .yearly-box ul.p-list li'                   => 'color: {{VALUE}}',
                ],
                'condition' => [
                    'yearly_custom_style' => 'yes',
                ],
                'separator' => 'before',
            ]
        );

        $repeater->add_control(
            'yearly_custom_btn_style',
            [
                'label'        => esc_html__( 'Custom Button Style', 'uppsae' ),
                'type'         => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default'      => 'no',
                'separator'    => 'before',
                'condition'    => [
                    'yearly_custom_style' => 'yes',
                    'y_btn_text!'         => '',
                ],
            ]
        );

        $repeater->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'      => 'yearly_btn_background',
                'label'     => esc_html__( 'Background', 'uppsae' ),
                'types'     => ['classic', 'gradient'],
                'selector'  => '{{WRAPPER}} {{CURRENT_ITEM}} .yearly-box .pricing-btn',
                'condition' => [
                    'yearly_custom_style'     => 'yes',
                    'yearly_custom_btn_style' => 'yes',
                    'y_btn_text!'             => '',
                ],
            ]
        );

        $repeater->add_control(
            'yearly_btn_text_color',
            [
                'label'     => esc_html__( 'Text Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .yearly-box .pricing-btn' => 'color: {{VALUE}}',
                ],
                'condition' => [
                    'yearly_custom_style'     => 'yes',
                    'yearly_custom_btn_style' => 'yes',
                    'y_btn_text!'             => '',
                ],
            ]
        );

        $repeater->add_control(
            'yearly_h_heading',
            [
                'label'     => __( 'Button Hover', 'plugin-name' ),
                'type'      => Controls_Manager::HEADING,
                'separator' => 'before',
                'condition' => [
                    'yearly_custom_style'     => 'yes',
                    'yearly_custom_btn_style' => 'yes',
                    'y_btn_text!'             => '',
                ],
            ]
        );

        $repeater->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'      => 'yearly_btn_hover_background',
                'label'     => esc_html__( 'Background', 'uppsae' ),
                'types'     => ['classic', 'gradient'],
                'selector'  => '{{WRAPPER}} {{CURRENT_ITEM}} .yearly-box .pricing-btn:before',
                'condition' => [
                    'yearly_custom_style'     => 'yes',
                    'yearly_custom_btn_style' => 'yes',
                    'y_btn_text!'             => '',
                ],
            ]
        );

        $repeater->add_control(
            'yearly_btn_text_hover_color',
            [
                'label'     => esc_html__( 'Text Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .yearly-box .pricing-btn:hover' => 'color: {{VALUE}}',
                ],
                'condition' => [
                    'yearly_custom_style'     => 'yes',
                    'yearly_custom_btn_style' => 'yes',
                    'y_btn_text!'             => '',
                ],
            ]
        );

        $repeater->end_controls_tab();

        $repeater->end_controls_tabs();

        $this->add_control(
            'pricing_tables',
            [
                'label'       => esc_html__( 'Pricing Plans', 'uppsae' ),
                'type'        => Controls_Manager::REPEATER,
                'fields'      => $repeater->get_controls(),
                'default'     => [
                    [
                        'plan_name' => esc_html__( 'Starter Plan', 'uppsae' ),
                        'm_btn_link' => [
                            'url' => '#'
                        ],
                        'y_btn_link' => [
                            'url' => '#'
                        ],
                    ],
                    [
                        'plan_name' => esc_html__( 'Premium Plan', 'uppsae' ),
                        'm_btn_link' => [
                            'url' => '#'
                        ],
                        'y_btn_link' => [
                            'url' => '#'
                        ],
                    ],
                ],
                'title_field' => '{{{ plan_name }}}',
            ]
        );

        $this->end_controls_section();

    }

    protected function style_wrapper() {

        $this->start_controls_section(
            '_wrapper_style_section',
            [
                'label' => esc_html__( 'Wrapper', 'uppsae' ),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'     => 'wrapper_background',
                'label'    => esc_html__( 'Background', 'uppsae' ),
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .pricing-wrapper',
            ]
        );

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

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'wrapper_box_shadow',
                'selector' => '{{WRAPPER}} .pricing-wrapper',
            ]
        );

        $this->add_responsive_control(
            'wrapper_margin',
            [
                'label'      => esc_html__( 'Margin', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'wrapper_padding',
            [
                'label'      => esc_html__( 'Padding', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

    }

    protected function style_pricing_item() {

        $this->start_controls_section(
            '_pricing_item_style_section',
            [
                'label' => esc_html__( 'Pricing Box', 'uppsae' ),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'     => 'pi_box_background',
                'label'    => esc_html__( 'Background', 'uppsae' ),
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .pricing-box',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'     => 'pi_box_border',
                'label'    => esc_html__( 'Border', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-box',
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'pi_box_box_shadow',
                'selector' => '{{WRAPPER}} .pricing-box',
            ]
        );

        $this->add_responsive_control(
            'pi_box_padding',
            [
                'label'      => esc_html__( 'Padding', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

    }

    protected function style_heading() {

        $this->start_controls_section(
            '_heading_style_section',
            [
                'label'     => esc_html__( 'Heading', 'uppsae' ),
                'tab'       => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'heading!' => '',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'heading_typography',
                'label'    => esc_html__( 'Typography', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-heading .p-heading',
            ]
        );

        $this->add_control(
            'heading_color',
            [
                'label'     => esc_html__( 'Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .pricing-heading .p-heading' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name'     => 'heading_text_shadow',
                'selector' => '{{WRAPPER}} .pricing-heading .p-heading',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'     => 'heading_border',
                'label'    => esc_html__( 'Border', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-heading .p-heading',
            ]
        );

        $this->add_responsive_control(
            'heading_margin',
            [
                'label'      => esc_html__( 'Margin', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-heading .p-heading' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'heading_padding',
            [
                'label'      => esc_html__( 'Padding', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-heading .p-heading' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

    }

    protected function style_description() {

        $this->start_controls_section(
            '_desc_style_section',
            [
                'label'     => esc_html__( 'Description', 'uppsae' ),
                'tab'       => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'desc!' => '',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'desc_typography',
                'label'    => esc_html__( 'Typography', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-heading .p-desc',
            ]
        );

        $this->add_control(
            'desc_color',
            [
                'label'     => esc_html__( 'Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .pricing-heading .p-desc' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name'     => 'desc_text_shadow',
                'selector' => '{{WRAPPER}} .pricing-heading .p-desc',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'     => 'desc_border',
                'label'    => esc_html__( 'Border', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-heading .p-desc',
            ]
        );

        $this->add_responsive_control(
            'desc_margin',
            [
                'label'      => esc_html__( 'Margin', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-heading .p-desc' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'desc_padding',
            [
                'label'      => esc_html__( 'Padding', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-heading .p-desc' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

    }

    protected function style_switcher_btn() {

        $this->start_controls_section(
            '_switcher_btn_style_section',
            [
                'label' => esc_html__( 'Switcher Button', 'uppsae' ),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->start_controls_tabs( 'style_tabs' );

        $this->start_controls_tab(
            'switcher_style_normal_tab',
            [
                'label' => __( 'Normal', 'uppsae' ),
            ]
        );

        $this->add_responsive_control(
            'sw_btn_width',
            [
                'label'      => esc_html__( 'Button Width', 'uppsae' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range'      => [
                    'px' => [
                        'min'  => 0,
                        'max'  => 1000,
                        'step' => 1,
                    ],
                ],
                'default'    => [
                    'unit' => 'px',
                    'size' => 120,
                ],
                'selectors'  => [
                    '{{WRAPPER}} .cd-pricing-switcher label' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'     => 'sw_background',
                'label'    => esc_html__( 'Background', 'uppsae' ),
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .cd-pricing-switcher .fieldset',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'switcher_btn_typography',
                'label'    => esc_html__( 'Typography', 'uppsae' ),
                'selector' => '{{WRAPPER}} .cd-pricing-switcher label',
            ]
        );

        $this->add_control(
            'switcher_btn_color',
            [
                'label'     => esc_html__( 'Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .cd-pricing-switcher label' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name'     => 'sw_btn_text_shadow',
                'selector' => '{{WRAPPER}} .cd-pricing-switcher label',
            ]
        );

        $this->add_control(
            'switcher_bd_color',
            [
                'label'     => esc_html__( 'Border Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .cd-pricing-switcher .fieldset' => 'border-color: {{VALUE}}',
                ],
                'condition' => [
                    'switcher_btn_gap' => 'yes',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'      => 'sw_btn_border',
                'label'     => esc_html__( 'Border', 'uppsae' ),
                'selector'  => '{{WRAPPER}} .cd-pricing-switcher .fieldset',
                'condition' => [
                    'switcher_btn_gap' => 'no',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'sw_btn_box_shadow',
                'selector' => '{{WRAPPER}} .cd-pricing-switcher .fieldset',
            ]
        );

        $this->add_responsive_control(
            'sw_btn_border_radius',
            [
                'label'      => esc_html__( 'Border Radius', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .cd-pricing-switcher .fieldset' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'sw_btn_margin',
            [
                'label'      => esc_html__( 'Margin', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .cd-pricing-switcher .fieldset' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'sw_btn_padding',
            [
                'label'      => esc_html__( 'Padding', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .cd-pricing-switcher .fieldset' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'switcher_style_active_tab',
            [
                'label' => __( 'Active', 'uppsae' ),
            ]
        );

        $this->add_control(
            'switcher_btn_gap',
            [
                'label'                => esc_html__( 'Button Gap', 'uppsae' ),
                'type'                 => Controls_Manager::CHOOSE,
                'options'              => [
                    'yes' => [
                        'title' => esc_html__( 'Yes', 'uppsae' ),
                        'icon'  => 'eicon-text-align-left',
                    ],
                    'no'  => [
                        'title' => esc_html__( 'No', 'uppsae' ),
                        'icon'  => 'eicon-text-align-center',
                    ],
                ],
                'default'              => 'yes',
                'toggle'               => false,
                'prefix_class'         => 'switch-btn-gap-',
                'selectors_dictionary' => [
                    'yes' => 'top: 2px; left: 2px; bottom: 2px;',
                    'no'  => 'top: 0; left: 0; bottom: 0;',
                ],
                'selectors'            => [
                    '{{WRAPPER}} .cd-pricing-switcher .cd-switch'                                                                                                                                                                            => '{{VALUE}}',
                    '{{WRAPPER}}.switch-btn-gap-no .cd-pricing-switcher input[type="radio"]:checked + label + .cd-switch,{{WRAPPER}}.switch-btn-gap-no .cd-pricing-switcher input[type="radio"]:checked + label:nth-of-type(n) + .cd-switch' => 'transform: translateX(100%)',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'     => 'sw_active_background',
                'label'    => esc_html__( 'Background', 'uppsae' ),
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .cd-pricing-switcher .cd-switch',
            ]
        );

        $this->add_control(
            'switcher_btn_active_color',
            [
                'label'     => esc_html__( 'Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .cd-pricing-switcher input[type="radio"]:checked + label' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name'     => 'sw_btn_active_text_shadow',
                'selector' => '{{WRAPPER}} .cd-pricing-switcher input[type="radio"]:checked + label',
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'sw_btn_active_box_shadow',
                'selector' => '{{WRAPPER}} .cd-pricing-switcher .cd-switch',
            ]
        );

        $this->add_responsive_control(
            'switcher_btn_active_border_radius',
            [
                'label'      => esc_html__( 'Border Radius', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .cd-pricing-switcher .cd-switch' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->end_controls_section();

    }

    protected function style_badge() {

        $this->start_controls_section(
            '_badge_style_section',
            [
                'label' => esc_html__( 'Badge', 'uppsae' ),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'badge_style',
            [
                'label'   => esc_html__( 'Badge Style', 'uppsae' ),
                'type'    => Controls_Manager::SELECT,
                'default' => 'badge-1',
                'options' => [
                    'badge-1' => esc_html__( 'Style 1', 'uppsae' ),
                    'badge-2' => esc_html__( 'Style 2', 'uppsae' ),
                    'badge-3' => esc_html__( 'Style 3', 'uppsae' ),
                ],
            ]
        );

        $this->add_control(
            'badge_pos',
            [
                'label'     => esc_html__( 'Badge Position', 'uppsae' ),
                'type'      => Controls_Manager::SELECT,
                'default'   => 'right',
                'options'   => [
                    'left'  => esc_html__( 'Left', 'uppsae' ),
                    'right' => esc_html__( 'Right', 'uppsae' ),
                ],
                'condition' => [
                    'badge_style!' => 'badge-1',
                ],
            ]
        );

        $this->add_control(
            'badge1_pos',
            [
                'label'                => esc_html__( 'Badge Position', 'uppsae' ),
                'type'                 => Controls_Manager::CHOOSE,
                'options'              => [
                    'left'   => [
                        'title' => esc_html__( 'Left', 'uppsae' ),
                        'icon'  => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__( 'Center', 'uppsae' ),
                        'icon'  => 'eicon-text-align-center',
                    ],
                    'right'  => [
                        'title' => esc_html__( 'Right', 'uppsae' ),
                        'icon'  => 'eicon-text-align-right',
                    ],
                ],
                'default'              => 'center',
                'toggle'               => false,
                'prefix_class'         => 'badge-',
                'selectors_dictionary' => [
                    'left'   => 'left: 0; transform: translate(0);',
                    'center' => 'left: 50%; transform: translate(-50%, 0);',
                    'right'  => 'left: auto; right: 0; transform: translate(0);',
                ],
                'selectors'            => [
                    '{{WRAPPER}} .pricing-box.popular.badge-1:before' => '{{VALUE}}',
                ],
                'condition'            => [
                    'badge_style' => 'badge-1',
                ],
            ]
        );

        $this->add_responsive_control(
            'badge_width',
            [
                'label'      => esc_html__( 'Badge Width', 'uppsae' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range'      => [
                    'px' => [
                        'min'  => 0,
                        'max'  => 1000,
                        'step' => 1,
                    ],
                ],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-box.popular:before' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'     => 'badge_background',
                'label'    => esc_html__( 'Background', 'uppsae' ),
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .pricing-box.popular:before',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'badge_typography',
                'label'    => esc_html__( 'Typography', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-box.popular:before',
            ]
        );

        $this->add_control(
            'badge_text_color',
            [
                'label'     => esc_html__( 'Text Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .pricing-box.popular:before' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name'     => 'badge_text_shadow',
                'selector' => '{{WRAPPER}} .pricing-box.popular:before',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'     => 'badge_border',
                'label'    => esc_html__( 'Border', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-box.popular:before',
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'badge_box_shadow',
                'selector' => '{{WRAPPER}} .pricing-box.popular:before',
            ]
        );

        $this->add_responsive_control(
            'badge_border_radius',
            [
                'label'      => esc_html__( 'Border Radius', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-box.popular:before' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'badge_offset_toggle',
            [
                'label'        => esc_html__( 'Badge Offset', 'uppsae' ),
                'type'         => Controls_Manager::POPOVER_TOGGLE,
                'label_off'    => esc_html__( 'None', 'uppsae' ),
                'label_on'     => esc_html__( 'Custom', 'uppsae' ),
                'return_value' => 'yes',
            ]
        );

        $this->start_popover();

        $this->add_responsive_control(
            'badge_x_position',
            [
                'label'      => esc_html__( 'X', 'uppsae' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => ['%', 'px'],
                'range'      => [
                    '%'  => [
                        'min' => -100,
                        'max' => 100,
                    ],
                    'px' => [
                        'min' => -4000,
                        'max' => 4000,
                    ],
                ],
                'condition'  => [
                    'badge_offset_toggle' => 'yes',
                ],
                'selectors'  => [
                    '{{WRAPPER}}.badge-left .pricing-box.popular.badge-1:before'  => 'left: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}}.badge-right .pricing-box.popular.badge-1:before' => 'right: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .pricing-box.popular.badge-2.left:before'        => 'left: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .pricing-box.popular.badge-2.right:before'       => 'right: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .pricing-box.popular.badge-3.left:before'        => 'left: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .pricing-box.popular.badge-3.right:before'       => 'right: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'badge_y_position',
            [
                'label'      => esc_html__( 'Y', 'uppsae' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => ['%', 'px'],
                'range'      => [
                    '%'  => [
                        'min' => -100,
                        'max' => 100,
                    ],
                    'px' => [
                        'min' => -4000,
                        'max' => 4000,
                    ],
                ],
                'condition'  => [
                    'badge_offset_toggle' => 'yes',
                ],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-box.popular:before' => 'top: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_popover();

        $this->end_controls_section();
    }

    protected function style_pricing_head() {

        $this->start_controls_section(
            '_pricing_head_style_section',
            [
                'label' => esc_html__( 'Pricing Head', 'uppsae' ),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'ph_reverse',
            [
                'label'                => esc_html__( 'Reverse Position', 'uppsae' ),
                'type'                 => Controls_Manager::CHOOSE,
                'options'              => [
                    'yes' => [
                        'title' => esc_html__( 'Yes', 'uppsae' ),
                        'icon'  => 'fas fa-thumbs-up',
                    ],
                    'no'  => [
                        'title' => esc_html__( 'No', 'uppsae' ),
                        'icon'  => 'fas fa-thumbs-down',
                    ],
                ],
                'default'              => 'no',
                'toggle'               => false,
                'selectors_dictionary' => [
                    'yes' => 'flex-direction: column-reverse',
                    'no'  => 'flex-direction: column',
                ],
                'selectors'            => [
                    '{{WRAPPER}} .pricing-head' => '{{VALUE}}',
                ],
            ]
        );

        $this->start_controls_tabs( 'pricing_head_tabs' );

        $this->start_controls_tab(
            'ph_heading_tab',
            [
                'label' => __( 'Heading', 'plugin-name' ),
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'     => 'ph_heading_background',
                'label'    => esc_html__( 'Background', 'uppsae' ),
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .pricing-head h4',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'ph_heading_typography',
                'label'    => esc_html__( 'Typography', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-head h4',
            ]
        );

        $this->add_control(
            'ph_heading_color',
            [
                'label'     => esc_html__( 'Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .pricing-head h4' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name'     => 'ph_heading_text_shadow',
                'selector' => '{{WRAPPER}} .pricing-head h4',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'     => 'ph_heading_border',
                'label'    => esc_html__( 'Border', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-head h4',
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'ph_heading_box_shadow',
                'selector' => '{{WRAPPER}} .pricing-head h4',
            ]
        );

        $this->add_responsive_control(
            'ph_heading_border_radius',
            [
                'label'      => esc_html__( 'Border Radius', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-head h4' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ph_heading_margin',
            [
                'label'      => esc_html__( 'Margin', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-head h4' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ph_heading_padding',
            [
                'label'      => esc_html__( 'Padding', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-head h4' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'ph_price_tab',
            [
                'label' => __( 'Price', 'plugin-name' ),
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'     => 'ph_price_background',
                'label'    => esc_html__( 'Background', 'uppsae' ),
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .pricing-head h3',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'ph_price_typography',
                'label'    => esc_html__( 'Typography', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-head h3 .p-price',
            ]
        );

        $this->add_control(
            'el_ph_color',
            [
                'label'     => esc_html__( 'Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .pricing-head h3 .p-price' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name'     => 'ph_price_text_shadow',
                'selector' => '{{WRAPPER}} .pricing-head h3 .p-price',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'     => 'ph_price_border',
                'label'    => esc_html__( 'Border', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-head h3',
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'ph_price_box_shadow',
                'selector' => '{{WRAPPER}} .pricing-head h3',
            ]
        );

        $this->add_responsive_control(
            'ph_price_border_radius',
            [
                'label'      => esc_html__( 'Border Radius', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-head h3' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ph_price_margin',
            [
                'label'      => esc_html__( 'Margin', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-head h3' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ph_price_padding',
            [
                'label'      => esc_html__( 'Padding', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-head h3' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'symbol_ym_style',
            [
                'label'     => __( 'Symbol/Year/Month Style', 'plugin-name' ),
                'type'      => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'ph_sym_pos',
            [
                'label'                => esc_html__( 'Position', 'uppsae' ),
                'type'                 => Controls_Manager::CHOOSE,
                'options'              => [
                    'top'    => [
                        'title' => esc_html__( 'Top', 'uppsae' ),
                        'icon'  => 'eicon-v-align-top',
                    ],
                    'center' => [
                        'title' => esc_html__( 'Center', 'uppsae' ),
                        'icon'  => 'eicon-v-align-middle',
                    ],
                    'bottom' => [
                        'title' => esc_html__( 'Bottom', 'uppsae' ),
                        'icon'  => 'eicon-v-align-bottom',
                    ],
                ],
                'default'              => 'bottom',
                'toggle'               => false,
                'selectors_dictionary' => [
                    'top'    => 'align-items: flex-start;',
                    'center' => 'align-items: center;',
                    'bottom' => 'align-items: flex-end;',
                ],
                'selectors'            => [
                    '{{WRAPPER}} .pricing-head h3' => '{{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'ph_sym_typography',
                'label'    => esc_html__( 'Typography', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-head h3 span.currency, {{WRAPPER}} .pricing-head h3 span.cal-name',
            ]
        );

        $this->add_control(
            'ph_sym_color',
            [
                'label'     => esc_html__( 'Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .pricing-head h3 span.currency, {{WRAPPER}} .pricing-head h3 span.cal-name' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_responsive_control(
            'ph_symbol_margin',
            [
                'label'      => esc_html__( 'Symbol Margin', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-head h3 span.currency' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ph_ym_margin',
            [
                'label'      => esc_html__( 'Year/Month Margin', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-head h3 span.cal-name' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'ph_icon_tab',
            [
                'label' => __( 'Icon', 'plugin-name' ),
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'     => 'ph_icon_background',
                'label'    => esc_html__( 'Background', 'uppsae' ),
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .pricing-head i.ph-icon, {{WRAPPER}} .pricing-head svg',
            ]
        );

        $this->add_control(
            'ph_icon_color',
            [
                'label'     => esc_html__( 'Icon Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .pricing-head i.ph-icon' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .pricing-head svg'       => 'fill: {{VALUE}}',
                ],
            ]
        );

        $this->add_responsive_control(
            'ph_icon_size',
            [
                'label'      => esc_html__( 'Icon Size', 'uppsae' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range'      => [
                    'px' => [
                        'min'  => 0,
                        'max'  => 500,
                        'step' => 1,
                    ],
                ],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-head i.ph-icon' => 'font-size: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .pricing-head svg'       => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'     => 'ph_icon_border',
                'label'    => esc_html__( 'Border', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-head i.ph-icon, {{WRAPPER}} .pricing-head svg',
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'ph_icon_box_shadow',
                'selector' => '{{WRAPPER}} .pricing-head i.ph-icon, {{WRAPPER}} .pricing-head svg',
            ]
        );

        $this->add_responsive_control(
            'ph_icon_margin',
            [
                'label'      => esc_html__( 'Margin', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-head i.ph-icon, {{WRAPPER}} .pricing-head svg' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ph_icon_padding',
            [
                'label'      => esc_html__( 'Padding', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-head i.ph-icon, {{WRAPPER}} .pricing-head svg' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->end_controls_section();

    }

    protected function style_pricing_list() {

        $this->start_controls_section(
            '_pricing_list_style_section',
            [
                'label' => esc_html__( 'Pricing List', 'uppsae' ),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'     => 'p_list_background',
                'label'    => esc_html__( 'Background', 'uppsae' ),
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} ul.p-list li',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'p_list_typography',
                'label'    => esc_html__( 'Typography', 'uppsae' ),
                'selector' => '{{WRAPPER}} ul.p-list li',
            ]
        );

        $this->add_control(
            'p_list_color',
            [
                'label'     => esc_html__( 'Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} ul.p-list li' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'p_list_check_icon_color',
            [
                'label'     => esc_html__( 'Check Icon Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} ul.p-list li i.check' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'p_list_cross_icon_color',
            [
                'label'     => esc_html__( 'Cross Icon Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} ul.p-list li i.cross' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name'     => 'p_list_text_shadow',
                'selector' => '{{WRAPPER}} ul.p-list li',
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'p_list_box_shadow',
                'selector' => '{{WRAPPER}} ul.p-list li',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'     => 'p_list_border',
                'label'    => esc_html__( 'Border', 'uppsae' ),
                'selector' => '{{WRAPPER}} ul.p-list li',
            ]
        );

        $this->add_responsive_control(
            'p_list_space_between',
            [
                'label'      => esc_html__( 'Space Between', 'uppsae' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range'      => [
                    'px' => [
                        'min'  => 0,
                        'max'  => 500,
                        'step' => 1,
                    ],
                ],
                'selectors'  => [
                    '{{WRAPPER}} ul.p-list li:not(:last-of-type)' => 'margin-bottom: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'p_list_padding',
            [
                'label'      => esc_html__( 'Padding', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} ul.p-list li' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'p_list_margin',
            [
                'label'      => esc_html__( 'Wrapper Margin', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} ul.p-list' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

    }

    protected function style_button() {

        $this->start_controls_section(
            '_button_style_section',
            [
                'label' => esc_html__( 'Button', 'uppsae' ),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->start_controls_tabs( 'button_control_tabs' );

        $this->start_controls_tab(
            'button_normal_tab',
            [
                'label' => esc_html__( 'Normal', 'uppsae' ),
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'     => 'button_bg_color',
                'label'    => __( 'Background', 'uppsae' ),
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .pricing-btn',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'label'    => esc_html__( 'Typography', 'uppsae' ),
                'name'     => 'wt_button_typography',
                'selector' => '{{WRAPPER}} .pricing-btn',
            ]
        );

        $this->add_control(
            'button_color',
            [
                'label'     => esc_html__( 'Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .pricing-btn' => 'color: {{VALUE}};',
                ],
                'default'   => '',
            ]
        );

        $this->add_responsive_control(
            'button_margin',
            [
                'label'      => esc_html__( 'Margin', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-btn' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'button_padding',
            [
                'label'      => esc_html__( 'Padding', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'button_radius',
            [
                'label'      => esc_html__( 'Border Radius', 'uppsae' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .pricing-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(), [
                'name'     => 'wt_button_border',
                'label'    => esc_html__( 'Border', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-btn',
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'button_hover_tab',
            [
                'label' => esc_html__( 'Hover', 'uppsae' ),
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'     => 'button_hover_bg_color',
                'label'    => __( 'Background', 'uppsae' ),
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .pricing-btn:before',
            ]
        );

        $this->add_control(
            'button_hover_color',
            [
                'label'     => esc_html__( 'Color', 'uppsae' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .pricing-btn:hover' => 'color: {{VALUE}};',
                ],
                'default'   => '',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(), [
                'name'     => 'button_hover_border',
                'label'    => esc_html__( 'Border', 'uppsae' ),
                'selector' => '{{WRAPPER}} .pricing-btn:hover',
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->end_controls_section();

    }

    protected function render(){
		$settings = $this->get_settings_for_display();
		$widget_id = $this->get_id();
		$switcher_monthly = 'monthly' === $settings['active_action'] ? 'checked' : '';
		$switcher_yearly = 'yearly' === $settings['active_action'] ? 'checked' : '';
		$active_monthly = 'monthly' === $settings['active_action'] ? 'is-visible' : 'is-hidden';
		$active_yearly = 'yearly' === $settings['active_action'] ? 'is-visible' : 'is-hidden';
		$pricing_plans = $settings['pricing_tables'];
		$currency = ! empty( $settings['currency'] ) ? '<span class="currency">'. $settings['currency'] .'</span>' : '<span class="currency">$</span>';
		?>
		<div class="pricing-wrapper">

			<div class="pricing-heading">
				<?php
				if( ! empty( $settings['heading'] || $settings['desc'] ) ) {
					if( ! empty( $settings['heading'] ) ) {
						echo '<'. esc_attr( $settings['heading_tag'] ) .' class="p-heading">'. Helper::kses_basic( $settings['heading'] ) .'</'. esc_attr( $settings['heading_tag'] ) .'>';
					}
					if( ! empty( $settings['desc'] ) ) {
						echo '<p class="p-desc">'. Helper::kses_basic( $settings['desc'] ) .'</p>';
					}
				}
				$month_text = ! empty( $settings['m_text'] ) ? $settings['m_text'] : esc_html__( 'Monthly', 'uppsae' );
				$year_text = ! empty( $settings['y_text'] ) ? $settings['y_text'] : esc_html__( 'Yearly', 'uppsae' );
				?>
				<div class="cd-pricing-switcher-container">
					<div class="cd-pricing-switcher">
					<p class="fieldset">
						<input type="radio" name="pricing-<?php echo $widget_id; ?>" value="monthly" id="monthly-<?php echo $widget_id; ?>" <?php echo esc_attr( $switcher_monthly ); ?>>
						<label for="monthly-<?php echo $widget_id; ?>"><?php echo esc_html( $month_text ); ?></label>
						<input type="radio" name="pricing-<?php echo $widget_id; ?>" value="yearly" id="yearly-<?php echo $widget_id; ?>" <?php echo esc_attr( $switcher_yearly ); ?>>
						<label for="yearly-<?php echo $widget_id; ?>"><?php echo esc_html( $year_text ); ?></label>
						<span class="cd-switch"></span>
					</p>
					</div>
				</div>
			</div>
			<?php if( ! empty( $pricing_plans ) ) : ?>
			<div class="pricing-wrap cd-pricing-container">
				<ul class="cd-pricing-list cd-bounce-invert">
					<?php foreach( $pricing_plans as $index => $plan ) : 
						$plan_list = ! empty( $plan['plan_list'] ) ? $plan['plan_list'] : '';
						$plan_list_items = explode("\n", $plan_list);
						$check_icon = 'icheck';
						$cross_icon = 'icross';
						$m_target = $plan['m_btn_link']['is_external'] ? ' target="_blank"' : '';
						$m_nofollow = $plan['m_btn_link']['nofollow'] ? ' rel="nofollow"' : '';
						$y_target = $plan['y_btn_link']['is_external'] ? ' target="_blank"' : '';
						$y_nofollow = $plan['y_btn_link']['nofollow'] ? ' rel="nofollow"' : '';
						$m_badge = 'yes' === $plan['m_badge'] ? 'popular' : '';
						$y_badge = 'yes' === $plan['y_badge'] ? 'popular' : '';
						$this->add_render_attribute( 'month_wrapper-' . $index, 
							[ 
								'class' => [ 'pricing-box monthly-box', $active_monthly ], 
								'data-type' => 'monthly' 
							]
						);
						if( 'yes' === $plan['m_badge'] ) {
							$this->add_render_attribute( 'month_wrapper-' . $index, 
								[ 
									'class' => [ $m_badge, $settings['badge_style'], $settings['badge_pos'] ],
									'data-popular' => $plan['m_badge_text']
								]
							);
						}
						$this->add_render_attribute( 'year_wrapper-' . $index, 
							[ 
								'class' => [ 'pricing-box yearly-box', $active_yearly ], 
								'data-type' => 'yearly' 
							]
						);
						if( 'yes' === $plan['y_badge'] ) {
							$this->add_render_attribute( 'year_wrapper-' . $index, 
								[ 
									'class' => [ $y_badge, $settings['badge_style'], $settings['badge_pos'] ],
									'data-popular' => $plan['y_badge_text']
								]
							);
						}
					?>
					<li class="elementor-repeater-item-<?php echo $plan['_id']; ?>">
						<ul class="cd-pricing-wrapper">
							<li <?php echo $this->get_render_attribute_string('month_wrapper-' . $index); ?>>
								<div class="pricing-head">
								<?php
								if( ! empty( $plan['plan_name'] ) ) {
									echo '<h4>'. esc_html( $plan['plan_name'] ) .'</h4>';
								}
								if( ! empty( $plan['m_price'] ) ) {
									$m_text = ! empty( $plan['m_text'] ) ? '<span class="cal-name">'. $plan['m_text'] .'</span>' : '';
									echo '<h3>'. Helper::kses_basic( $currency ) . '<span class="p-price">' . esc_html( $plan['m_price'] ). '</span>' . Helper::kses_basic( $m_text ) .'</h3>';
								}
								Icons_Manager::render_icon( $plan['icon'], [ 'aria-hidden' => 'true', 'class' => 'ph-icon' ] );
								?>
								</div>
								<?php if( ! empty( $plan_list ) ) : ?>
								<ul class="p-list">
									<?php
									foreach( $plan_list_items as $plan_list_item ) {
										if( strpos( $plan_list_item, $check_icon) !== false ){
											echo '<li><i class="check fas fa-check"></i>'. esc_html( trim( str_replace( $check_icon, '', $plan_list_item ) ) ) .'</li>';
										}elseif( strpos( $plan_list_item, $cross_icon) !== false ){
											echo '<li><i class="cross fas fa-times"></i>'. esc_html( trim( str_replace( $cross_icon, '', $plan_list_item )) ) .'</li>';
										}else{
											echo '<li>'. esc_html( trim( $plan_list_item ) ) .'</li>';
										}
									}
									?>
								</ul>
								<?php endif; 
									if( ! empty( $plan['m_btn_text'] && $plan['m_btn_link']['url'] ) ){
										echo '<div class="pricing-footer"><a class="pricing-btn" href="'. esc_url( $plan['m_btn_link']['url'] ) .'" '. $m_target . $m_nofollow .'>'. esc_html( $plan['m_btn_text'] ) .'</a></div>';
									}
								?>
							</li>
							<li <?php echo $this->get_render_attribute_string('year_wrapper-' . $index); ?>>
								<div class="pricing-head">
								<?php
									if( ! empty( $plan['plan_name'] ) ) {
										echo '<h4>'. esc_html( $plan['plan_name'] ) .'</h4>';
									}
									if( ! empty( $plan['y_price'] ) ) {
										$y_text = ! empty( $plan['y_text'] ) ? '<span class="cal-name">'. $plan['y_text'] .'</span>' : '';
										echo '<h3>'. Helper::kses_basic( $currency ) . '<span class="p-price">' . esc_html( $plan['y_price'] ) . '</span>' . Helper::kses_basic( $y_text ) .'</h3>';
									}
									Icons_Manager::render_icon( $plan['icon'], [ 'aria-hidden' => 'true', 'class' => 'ph-icon' ] );
								?>
								</div>
								<?php if( ! empty( $plan_list ) ) : 
								?>
								<ul class="p-list">
									<?php
									foreach( $plan_list_items as $plan_list_item ) {
										if( strpos( $plan_list_item, $check_icon) !== false ){
											echo '<li><i class="check fas fa-check"></i>'. esc_html( trim( str_replace( $check_icon, '', $plan_list_item ) ) ) .'</li>';
										}elseif( strpos( $plan_list_item, $cross_icon) !== false ){
											echo '<li><i class="cross fas fa-times"></i>'. esc_html( trim( str_replace( $cross_icon, '', $plan_list_item ) ) ) .'</li>';
										}else{
											echo '<li>'. esc_html( trim( $plan_list_item ) ) .'</li>';
										}
									}
									?>
								</ul>
								<?php endif; 
								if( ! empty( $plan['y_btn_text'] && $plan['y_btn_link']['url'] ) ){
									echo '<div class="pricing-footer"><a class="pricing-btn" href="'. esc_url( $plan['y_btn_link']['url'] ) .'" '. $y_target . $y_nofollow .'>'. esc_html( $plan['y_btn_text'] ) .'</a></div>';
								}
								?>
							</li>
						</ul>
					</li>
					<?php endforeach; ?>
				</ul>
			</div>
			<?php endif; ?>
		</div>
		<?php
	}

}