<?php

namespace King_Addons;

use Elementor\Controls_Manager;
use Elementor\Widget_Base;
use Elementor\Repeater;

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

class Charts extends Widget_Base
{
    


    public function get_name()
    {
        return 'king-addons-charts';
    }

    public function get_title()
    {
        return esc_html__('Charts', 'king-addons');
    }

    public function get_icon()
    {
        return 'king-addons-icon king-addons-charts';
    }

    public function get_script_depends()
    {
        return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-charts-charts', KING_ADDONS_ASSETS_UNIQUE_KEY . '-charts-script'];
    }

    public function get_style_depends()
    {
        return [
            KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-timing',
            KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-loading',
            KING_ADDONS_ASSETS_UNIQUE_KEY . '-charts-style'
        ];
    }

    public function get_categories()
    {
        return ['king-addons'];
    }

    public function get_keywords()
    {
        return ['charts', 'chart', 'polar', 'linear', 'graph', 'pie', 'radar', 'king addons', 'line charts',
            'radar charts', 'doughnut charts', 'pie charts', 'polararea charts', 'vertical', 'bar', 'polararea',
            'polar charts', 'bar charts', 'horizontal charts', 'vertical charts', 'horizontal',
            'king', 'addons', 'kingaddons', 'king-addons'];
    }

    public function get_custom_help_url()
    {
        return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
    }

    public function add_control_choose_chart_data_source()
    {
        $this->add_control(
            'data_source',
            [
                'label' => esc_html__('Data Source', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'custom',
                'options' => [
                    'custom' => esc_html__('Custom', 'king-addons'),
                    'pro-csv' => 'CSV' . ' ' . esc_html__('File', 'king-addons') . ' (Pro)',
                ],
                'frontend_available' => true,
            ]
        );
    }

    protected function register_controls()
    {

        $this->start_controls_section(
            'section_chart_general',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control_choose_chart_data_source();

        Core::renderUpgradeProNotice($this, Controls_Manager::RAW_HTML, 'charts', 'data_source', ['pro-csv']);

        $this->add_control(
            'csv_source',
            [
                'label' => esc_html__('CSV Source', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'url',
                'options' => [
                    'url' => esc_html__('Remote URL', 'king-addons'),
                    'file' => esc_html__('File', 'king-addons'),
                ],
                'condition' => [
                    'data_source' => 'csv',
                ],
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'data_csv_separator',
            [
                'label' => esc_html__('Separator', 'king-addons'),
                'type' => Controls_Manager::TEXT,
                'default' => ',',
                'label_block' => true,
                'condition' => [
                    'data_source' => 'csv',
                ],
            ]
        );

        $this->add_control(
            'data_source_csv_url',
            [
                'label' => esc_html__('Remote URL', 'king-addons'),
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'label_block' => true,
                'condition' => [
                    'data_source' => 'csv',
                    'csv_source' => 'url',
                ],
            ]
        );

        $this->add_control(
            'data_source_csv_file',
            [
                'label' => esc_html__('Upload CSV File', 'king-addons'),
                'type' => Controls_Manager::MEDIA,
                'dynamic' => ['
					active' => true,
                ],
                'media_type' => [],
                'label_block' => true,
                'condition' => [
                    'data_source' => 'csv',
                    'csv_source' => 'file',
                ],
            ]
        );

        $this->add_control(
            'chart_type',
            [
                'label' => esc_html__('Chart Styles', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'description' => esc_html__('Doughnut, pie and polar area charts only work with custom data source', 'king-addons'),
                'default' => 'bar',
                'options' => [
                    'bar' => esc_html__('Bar Vertical', 'king-addons'),
                    'bar_horizontal' => esc_html__('Bar Horizontal', 'king-addons'),
                    'line' => esc_html__('Line', 'king-addons'),
                    'radar' => esc_html__('Radar', 'king-addons'),
                    'doughnut' => esc_html__('Doughnut', 'king-addons'),
                    'pie' => esc_html__('Pie', 'king-addons'),
                    'polarArea' => esc_html__('Polar Area', 'king-addons'),
                ],
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'data_type',
            [
                'label' => esc_html__('Data Grid Type', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'linear' => esc_html__('Linear', 'king-addons'),
                    'logarithmic' => esc_html__('Logarithmic', 'king-addons'),
                ],
                'default' => 'linear',
                'condition' => [
                    'chart_type' => ['bar', 'bar_horizontal', 'line']
                ],
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'column_width_x',
            [
                'label' => esc_html__('Column Width', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => 0.5,
                'step' => 0.1,
                'min' => 0,
                'max' => 1,
                'frontend_available' => true,
                'separator' => 'before',
                'condition' => [
                    'chart_type' => ['bar', 'bar_horizontal'],
                ]
            ]
        );

        $this->add_control(
            'exclude_dataset_on_click',
            [
                'label' => esc_html__('Exclude Data on Legend Click', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'return_value' => 'yes',
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'stacked_bar_chart',
            [
                'label' => esc_html__('Enable Stacked Chart', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'return_value' => 'yes',
                'condition' => [
                    'chart_type' => ['bar', 'bar_horizontal', 'radar', 'doughnut', 'pie']
                ]
            ]
        );

        $this->add_control(
            'inner_datalabels',
            [
                'label' => esc_html__('Show Data Values', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'false',
                'return_value' => 'true',
                'condition' => [
                    'chart_type' => ['bar', 'bar_horizontal', 'line', '']
                ]
            ]
        );

        $this->add_control(
            'enable_min_max',
            [
                'label' => esc_html__('Min-Max Values', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'no',
                'return_value' => 'yes',
                'separator' => 'before',
                'condition' => [
                    'chart_type!' => ['doughnut', 'polarArea', 'pie'],
                ]
            ]
        );

        $this->add_control(
            'min_value',
            [
                'label' => esc_html__('Min. Value', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => -100,
                'condition' => [
                    'enable_min_max' => 'yes',
                ]
            ]
        );

        $this->add_control(
            'max_value',
            [
                'label' => esc_html__('Max. Value', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => 100,
                'condition' => [
                    'enable_min_max' => 'yes',
                ]
            ]
        );

        $this->add_control(
            'animations_heading',
            [
                'label' => esc_html__('Animation', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'chart_animation',
            [
                'label' => esc_html__('Animation', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'return_value' => 'yes',
                'chart_type' => ['line', 'radar']
            ]
        );

        $this->add_control(
            'chart_animation_loop',
            [
                'label' => esc_html__('Loop', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'return_value' => 'yes',
                'condition' => [
                    'chart_animation' => 'yes',
                    'chart_type' => ['line', 'radar']
                ]
            ]
        );

        $this->add_control(
            'chart_animation_duration',
            [
                'label' => esc_html__('Animation Duration (ms)', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => 1000,
                'min' => 1,
                'condition' => [
                    'chart_animation' => 'yes',
                    'chart_type' => ['radar', 'line']
                ]
            ]
        );

        $this->add_control(
            'animation_transition_type',
            [
                'label' => esc_html__('Animation Timing', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'linear',
                'options' => [
                    'linear' => 'linear',
                    'easeInBack' => 'easeInBack',
                    'easeInBounce' => 'easeInBounce',
                    'easeInCirc' => 'easeInCirc',
                    'easeInCubic' => 'easeInCubic',
                    'easeInElastic' => 'easeInElastic',
                    'easeInExpo' => 'easeInExpo',
                    'easeInOutBack' => 'easeInOutBack',
                    'easeInOutBounce' => 'easeInOutBounce',
                    'easeInOutCirc' => 'easeInOutCirc',
                    'easeInOutCubic' => 'easeInOutCubic',
                    'easeInOutElastic' => 'easeInOutElastic',
                    'easeInOutExpo' => 'easeInOutExpo',
                    'easeInOutQuad' => 'easeInOutQuad',
                    'easeInOutQuart' => 'easeInOutQuart',
                    'easeInOutQuint' => 'easeInOutQuint',
                    'easeInOutSine' => 'easeInOutSine',
                    'easeInQuad' => 'easeInQuad',
                    'easeInQuart' => 'easeInQuart',
                    'easeInQuint' => 'easeInQuint',
                    'easeInSine' => 'easeInSine',
                    'easeOutBack' => 'easeOutBack',
                    'easeOutBounce' => 'easeOutBounce',
                    'easeOutCirc' => 'easeOutCirc',
                    'easeOutCubic' => 'easeOutCubic',
                    'easeOutElastic' => 'easeOutElastic',
                    'easeOutExpo' => 'easeOutExpo',
                    'easeOutQuad' => 'easeOutQuad',
                    'easeOutQuart' => 'easeOutQuart',
                    'easeOutQuint' => 'easeOutQuint',
                    'easeOutSine' => 'easeOutSine',
                ],
                'condition' => [
                    'chart_animation' => 'yes',
                    'chart_type' => ['radar', 'line']
                ]
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_chart_data',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Data', 'king-addons'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'charts_labels_data', [
                'label' => esc_html__('Data Labels', 'king-addons'),
                'type' => Controls_Manager::TEXTAREA,
                'dynamic' => [
                    'active' => true,
                ],
                'default' => esc_html__('January, February, March', 'king-addons'),
                'description' => esc_html__('Enter the comma-separated list of values (Used only with custom data source)', 'king-addons'),
                'label_block' => true,
                'condition' => [
                    'data_source' => 'custom',

                ],
            ]
        );

        if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
            $this->add_control(
                'charts_repeater_labels_data_pro_notice',
                [
                    'type' => Controls_Manager::RAW_HTML,
                    'raw' => 'More than 3 Data Labels are available<br> in the <strong><a href="https://kingaddons.com/pricing/?utm_source=kng-module-charts-settings-upgrade-pro&utm_medium=plugin&utm_campaign=kng" target="_blank">Pro version</a></strong>',
                    'content_classes' => 'king-addons-pro-notice',
                ]
            );
        }

        $chart_repeater_labels = new Repeater();

        $chart_repeater_labels->add_control(
            'chart_data_label', [
                'label' => esc_html__('Label', 'king-addons'),
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'default' => esc_html__('Label #1', 'king-addons'),
                'label_block' => true,
            ]
        );

        $chart_repeater_labels->add_control(
            'chart_data_set', [
                'label' => esc_html__('Data', 'king-addons'),
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'default' => '10,23,15',
                'label_block' => true,
                'description' => esc_html__("Only works with custom charts. Enter comma separated data values (Shouldn't Exceed number of values provided in Data Labels option).", 'king-addons'),
            ]
        );


        $chart_repeater_labels->start_controls_tabs(
            'chart_data_bar_background_tab'
        );

        $chart_repeater_labels->start_controls_tab(
            'chart_data_bar_background_normal',
            [
                'label' => esc_html__('Normal', 'king-addons'),
            ]
        );

        $chart_repeater_labels->add_control(
            'chart_data_background_color', [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#5B03FF',
            ]
        );

        $chart_repeater_labels->add_control(
            'chart_data_border_color', [
                'label' => esc_html__('Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#5B03FF',
            ]
        );

        $chart_repeater_labels->end_controls_tab();


        $chart_repeater_labels->start_controls_tab(
            'chart_data_bar_background_hover',
            [
                'label' => esc_html__('Hover', 'king-addons'),
            ]
        );
        $chart_repeater_labels->add_control(
            'chart_data_background_color_hover', [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#7A7A7ACC'
            ]
        );

        $chart_repeater_labels->add_control(
            'chart_data_border_color_hover', [
                'label' => esc_html__('Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#7A7A7ACC',
            ]
        );
        $chart_repeater_labels->end_controls_tab();

        $chart_repeater_labels->end_controls_tabs();


        $chart_repeater_labels->add_control(
            'chart_data_border_width', [
                'label' => esc_html__('Border Width', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => '1',
            ]
        );

        $this->add_control(
            'charts_data_set',
            [
                'label' => esc_html__('Set Data', 'king-addons'),
                'type' => Controls_Manager::REPEATER,
                'default' => [
                    [
                        'chart_data_label' => esc_html__('Laptops', 'king-addons'),
                        'chart_data_set' => '13,20,15',
                        'chart_data_background_color' => '#5B03FFCC',
                        'chart_data_border_color' => '#5B03FFCC',
                        'chart_data_border_width' => 1,
                    ],
                    [
                        'chart_data_label' => esc_html__('Phones', 'king-addons'),
                        'chart_data_set' => '20,10,33',
                        'chart_data_background_color' => '#E5605BCC',
                        'chart_data_border_color' => '#E5605BCC',
                        'chart_data_border_width' => 1,
                    ],
                    [
                        'chart_data_label' => esc_html__('Other', 'king-addons'),
                        'chart_data_set' => '10,3,23',
                        'chart_data_background_color' => '#5BE560CC',
                        'chart_data_border_color' => '#5BE560CC',
                        'chart_data_border_width' => 1,
                    ],

                ],

                'fields' => $chart_repeater_labels->get_controls(),
                'title_field' => '{{{ chart_data_label }}}',

            ]
        );

        if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
            $this->add_control(
                'charts_repeater_pro_notice',
                [
                    'type' => Controls_Manager::RAW_HTML,
                    'raw' => 'More than 3 Items are available<br> in the <strong><a href="https://kingaddons.com/pricing/?utm_source=kng-module-charts-settings-upgrade-pro&utm_medium=plugin&utm_campaign=kng" target="_blank">Pro version</a></strong>',
                    'content_classes' => 'king-addons-pro-notice',
                ]
            );
        }

        $this->end_controls_section();

        $this->start_controls_section(
            'section_chart_axis_r',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Axis', 'king-addons'),
                'tab' => Controls_Manager::TAB_CONTENT,
                'condition' => [
                    'chart_type' => ['radar', 'polarArea']
                ],
            ]
        );

        $this->add_control(
            'r_axis_conditions',
            [
                'label' => esc_html__('Axis', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'display_r_axis',
            [
                'label' => esc_html__('Grid Lines', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'true',
                'return_value' => 'true'
            ]
        );

        $this->add_control(
            'grid_line_width_r', [
                'label' => esc_html__('Grid Line Width', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => '1',
                'step' => 0.1,
                'condition' => [
                    'display_r_axis' => 'true'
                ]
            ]
        );

        $this->add_control(
            'display_r_ticks',
            [
                'label' => esc_html__('Ticks (Labels)', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'true',
                'return_value' => 'true'
            ]
        );

        $this->add_control(
            'r_step_size',
            [
                'label' => esc_html__('Step Size', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 360,
                'default' => 0,
                'frontend_available' => true,
                'condition' => [
                    'display_r_ticks' => 'true'
                ]
            ]
        );

        $this->add_control(
            'border_dash_length_r', [
                'label' => esc_html__('Border Dash length', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => '1',
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'border_dash_spacing_r', [
                'label' => esc_html__('Border Dash spacing', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => '1'
            ]
        );

        $this->add_control(
            'border_dash_offset_r', [
                'label' => esc_html__('Border Dash offset', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => '1'
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_chart_axis',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Axis', 'king-addons'),
                'tab' => Controls_Manager::TAB_CONTENT,
                'condition' => [
                    'chart_type' => ['bar', 'bar_horizontal', 'line']
                ],
            ]
        );

        $this->add_control(
            'x_axis_conditions',
            [
                'label' => esc_html__('X-Axis', 'king-addons'),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'display_x_axis',
            [
                'label' => esc_html__('Grid Lines', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'true',
                'return_value' => 'true',
            ]
        );

        $this->add_control(
            'grid_line_width_x', [
                'label' => esc_html__('Grid Line Width', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => '1',
                'step' => 0.1,
                'condition' => [
                    'display_x_axis' => 'true'
                ]
            ]
        );

        $this->add_control(
            'display_x_ticks',
            [
                'label' => esc_html__('Ticks (Labels)', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'true',
                'return_value' => 'true'
            ]
        );

        $this->add_control(
            'x_step_size',
            [
                'label' => esc_html__('Step Size', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 360,
                'default' => 0,
                'frontend_available' => true,
                'condition' => [
                    'display_x_ticks' => 'true'
                ]
            ]
        );

        $this->add_control(
            'display_x_axis_title',
            [
                'label' => esc_html__('Show Title', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'true',
                'return_value' => 'true'
            ]
        );

        $this->add_control(
            'x_axis_title',
            [
                'label' => esc_html__('Title', 'king-addons'),
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'placeholder' => esc_html__('X-Axis', 'king-addons'),
                'default' => esc_html__('X-Axis', 'king-addons'),
                'condition' => [
                    'display_x_axis_title' => 'true'
                ]
            ]
        );

        $this->add_control(
            'labels_rotation_x_axis',
            [
                'label' => esc_html__('Ticks (Labels) Rotation', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 360,
                'default' => 0,
                'frontend_available' => true
            ]
        );

        $this->add_control(
            'y_axis_conditions',
            [
                'label' => esc_html__('Y-Axis', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'display_y_axis',
            [
                'label' => esc_html__('Grid Lines', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'true',
                'return_value' => 'true'
            ]
        );

        $this->add_control(
            'grid_line_width_y', [
                'label' => esc_html__('Grid Line Width', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => '1',
                'step' => 0.1,
                'condition' => [
                    'display_y_axis' => 'true'
                ]
            ]
        );

        $this->add_control(
            'display_y_ticks',
            [
                'label' => esc_html__('Ticks (Labels)', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'true',
                'return_value' => 'true'
            ]
        );

        $this->add_control(
            'y_step_size',
            [
                'label' => esc_html__('Step Size', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 360,
                'default' => 0,
                'frontend_available' => true,
                'condition' => [
                    'display_y_ticks' => 'true'
                ]
            ]
        );

        $this->add_control(
            'display_y_axis_title',
            [
                'label' => esc_html__('Show Title', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'true',
                'return_value' => 'true'
            ]
        );

        $this->add_control(
            'y_axis_title',
            [
                'label' => esc_html__('Title', 'king-addons'),
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'placeholder' => esc_html__('Y-Axis', 'king-addons'),
                'default' => esc_html__('Y-Axis', 'king-addons'),
                'condition' => [
                    'display_y_axis_title' => 'true'
                ]
            ]
        );

        $this->add_control(
            'labels_rotation_y_axis',
            [
                'label' => esc_html__('Ticks (Labels) Rotation', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 360,
                'default' => 0,
                'frontend_available' => true
            ]
        );

        $this->add_control(
            'reverse_x',
            [
                'label' => esc_html__('Reverse Charts', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'no',
                'return_value' => 'yes',
                'separator' => 'before',
                'condition' => [
                    'show_chart_legend' => 'yes',
                    'chart_type' => 'bar_horizontal'
                ]
            ]
        );

        $this->add_control(
            'reverse_y',
            [
                'label' => esc_html__('Reverse Charts', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'no',
                'return_value' => 'yes',
                'separator' => 'before',
                'condition' => [
                    'show_chart_legend' => 'yes',
                    'chart_type' => ['bar', 'line']
                ]
            ]
        );

        $this->add_control(
            'border_dash_length', [
                'label' => esc_html__('Border Dash length', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => '1',
                'separator' => 'before',

                'conditions' => [
                    'relation' => 'or',
                    'terms' => [
                        [
                            'name' => 'display_x_axis',
                            'operator' => '==',
                            'value' => 'true'
                        ],
                        [
                            'name' => 'display_y_axis',
                            'operator' => '==',
                            'value' => 'true'
                        ]
                    ]
                ]
            ]
        );

        $this->add_control(
            'border_dash_spacing', [
                'label' => esc_html__('Border Dash spacing', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => '1',

                'conditions' => [
                    'relation' => 'or',
                    'terms' => [
                        [
                            'name' => 'display_x_axis',
                            'operator' => '==',
                            'value' => 'true'
                        ],
                        [
                            'name' => 'display_y_axis',
                            'operator' => '==',
                            'value' => 'true'
                        ]
                    ]
                ]
            ]
        );

        $this->add_control(
            'border_dash_offset', [
                'label' => esc_html__('Border Dash offset', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => '1',

                'conditions' => [
                    'relation' => 'or',
                    'terms' => [
                        [
                            'name' => 'display_x_axis',
                            'operator' => '==',
                            'value' => 'true'
                        ],
                        [
                            'name' => 'display_y_axis',
                            'operator' => '==',
                            'value' => 'true'
                        ]
                    ]
                ]
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_chart_title',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Title', 'king-addons'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'show_chart_title',
            [
                'label' => esc_html__('Show Title', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes'
            ]
        );

        $this->add_control(
            'chart_title',
            [
                'label' => esc_html__('Title', 'king-addons'),
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'placeholder' => esc_html__('To Be Applied', 'king-addons'),
                'default' => esc_html__('To Be Applied', 'king-addons'),
                'condition' => [
                    'show_chart_title' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'chart_title_position',
            [
                'label' => esc_html__('Position', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'top',
                'label_block' => false,
                'options' => [
                    'top' => esc_html__('Top', 'king-addons'),
                    'right' => esc_html__('Right', 'king-addons'),
                    'bottom' => esc_html__('Bottom', 'king-addons'),
                    'left' => esc_html__('Left', 'king-addons'),

                ],
                'condition' => [
                    'show_chart_title' => 'yes',
                ]
            ]
        );

        $this->add_control(
            'chart_title_align',
            [
                'label' => esc_html__('Align', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'center',
                'label_block' => false,
                'options' => [
                    'start' => esc_html__('Start', 'king-addons'),
                    'center' => esc_html__('Center', 'king-addons'),
                    'end' => esc_html__('End', 'king-addons'),
                ],
                'condition' => [
                    'show_chart_title' => 'yes',
                ]
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_chart_legend',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Legends', 'king-addons'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'show_chart_legend',
            [
                'label' => esc_html__('Show Legends', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'return_value' => 'yes',
            ]
        );

        $this->add_control(
            'reverse_legend',
            [
                'label' => esc_html__('Reverse', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'no',
                'return_value' => 'yes',
                'condition' => [
                    'show_chart_legend' => 'yes',
                ]
            ]
        );

        $this->add_control(
            'charts_legend_shape',
            [
                'label' => esc_html__('Shape', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'rectangle',
                'label_block' => false,
                'render_type' => 'template',
                'options' => [
                    'rectangle' => esc_html__('Rectangle', 'king-addons'),
                    'point' => esc_html__('Point', 'king-addons'),
                ],
                'condition' => [
                    'show_chart_legend' => 'yes',
                ]
            ]
        );

        $this->add_control(
            'charts_legend_position',
            [
                'label' => esc_html__('Position', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'top',
                'label_block' => false,
                'options' => [
                    'top' => esc_html__('Top', 'king-addons'),
                    'right' => esc_html__('Right', 'king-addons'),
                    'bottom' => esc_html__('Bottom', 'king-addons'),
                    'left' => esc_html__('Left', 'king-addons'),
                    'chartArea' => esc_html__('chartArea', 'king-addons'),
                ],
                'condition' => [
                    'show_chart_legend' => 'yes',
                ]
            ]
        );

        $this->add_control(
            'charts_legend_align',
            [
                'label' => esc_html__('Align', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'center',
                'label_block' => false,
                'options' => [
                    'start' => esc_html__('Start', 'king-addons'),
                    'center' => esc_html__('Center', 'king-addons'),
                    'end' => esc_html__('End', 'king-addons'),
                ],
                'condition' => [
                    'show_chart_legend' => 'yes',
                ]
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_chart_tooltip',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Tooltip', 'king-addons'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'show_chart_tooltip',
            [
                'label' => esc_html__('Show Tooltip', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'return_value' => 'yes'
            ]
        );

        $this->add_control(
            'tooltips_percent',
            [
                'label' => esc_html__('Convert Values to Percents', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'true',
                'default' => 'true',
                'frontend_available' => true,
                'condition' => [
                    'show_chart_tooltip' => 'yes'
                ]
            ]
        );

        $this->add_control(
            'trigger_tooltip_on',
            [
                'label' => esc_html__('Show Tooltip On', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'mousemove',
                'options' => [
                    'mousemove' => esc_html__('Hover', 'king-addons'),
                    'click' => esc_html__('Click', 'king-addons'),
                ],
                'condition' => [
                    'show_chart_tooltip' => 'yes'
                ]
            ]
        );

        $this->add_control(
            'chart_interaction_mode',
            [
                'label' => esc_html__('Interaction Mode', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'point',
                'options' => [

                    'point' => esc_html__('Point', 'king-addons'),
                    'index' => esc_html__('Index', 'king-addons'),
                    'dataset' => esc_html__('Dataset', 'king-addons'),
                ],
                'condition' => [
                    'show_chart_tooltip' => 'yes'
                ]
            ]
        );

        $this->add_control(
            'chart_tooltip_position',
            [
                'label' => esc_html__('Position', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'nearest',
                'options' => [
                    'nearest' => esc_html__('Nearest', 'king-addons'),
                    'average' => esc_html__('Average', 'king-addons'),
                ],
                'condition' => [
                    'show_chart_tooltip' => 'yes'
                ]
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_chart_lines',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Lines', 'king-addons'),
                'tab' => Controls_Manager::TAB_CONTENT,
                'condition' => [
                    'chart_type' => ['line', 'radar'],
                ]
            ]
        );

        $this->add_control(
            'show_lines',
            [
                'label' => esc_html__('Show Lines', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'return_value' => 'yes',
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'chart_type_line_fill',
            [
                'label' => esc_html__('Show Background Fill', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'return_value' => 'yes',
                'condition' => [
                    'chart_type!' => ['bar', 'bar_horizontal'],
                ]
            ]
        );

        $this->add_control(
            'line_dots',
            [
                'label' => esc_html__('Show Dots', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'return_value' => 'yes',
                'condition' => [
                    'chart_type!' => ['bar', 'bar_horizontal'],
                ]
            ]
        );

        $this->add_responsive_control(
            'line_dots_radius',
            [
                'label' => esc_html__('Dots Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'devices' => ['desktop', 'mobile'],
                'exclude' => ['tablet'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                    ],
                ],
                'size_units' => ['px'],
                'default' => [
                    'unit' => 'px',
                    'size' => 10,
                ],
                'mobile_default' => [
                    'unit' => 'px',
                    'size' => 5
                ],
                'condition' => [
                    'chart_type!' => ['bar', 'bar_horizontal'],
                    'line_dots' => 'yes',
                ]
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'chart_section_style_res',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Responsive', 'king-addons'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'responsive_chart',
            [
                'label' => esc_html__('Responsive Layout', 'king-addons'),
                'description' => esc_html__('Enables scrollbar on tablet and mobile screens', 'king-addons'),
                'default' => 'yes',
                'type' => Controls_Manager::SWITCHER,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-charts-container' => 'overflow: auto;',
                    '{{WRAPPER}} .king-addons-charts-wrapper' => 'position: relative; margin: 0 auto;',
                ],
            ]
        );


        $this->add_responsive_control(
            'chart_res_width',
            [
                'label' => esc_html__('Min Width (px)', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 1600
                    ]
                ],
                'default' => [
                    'size' => 800,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-charts-wrapper' => 'min-width: {{SIZE}}px;',
                ],
                'separator' => 'before',
                'condition' => [
                    'responsive_chart' => 'yes',
                ],
            ]
        );


        $this->add_responsive_control(
            'chart_res_height',
            [
                'label' => esc_html__('Min Height (px)', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 1600
                    ]
                ],
                'default' => [
                    'size' => 400,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-charts-wrapper' => 'min-height: {{SIZE}}px;',
                ],
                'condition' => [
                    'responsive_chart' => 'yes',
                ],
            ]
        );

        $this->end_controls_section();

        Core::renderProFeaturesSection($this, '', Controls_Manager::RAW_HTML, 'charts', [
            'Upload CSV File',
            'Import CSV File from URL',
            'Import Published Google Sheets',
            'Add Unlimited Chart Items',
            'Add Unlimited Data Labels'
        ]);

        $this->start_controls_section(
            'section_datalabels_styles',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Data Values', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'inner_datalabels' => 'true'
                ]
            ]
        );

        $this->add_control(
            'inner_datalabels_color', [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#FFF',
            ]
        );

        $this->add_control(
            'inner_datalabels_font_family',
            [
                'label' => esc_html__('Font Family', 'king-addons'),
                'type' => Controls_Manager::FONT,
                'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'),
                'default' => 'Arial',
            ]
        );

        $this->add_control(
            'inner_datalabels_font_style',
            [
                'label' => esc_html__('Font Style', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'normal',
                'options' => [
                    'normal' => 'Normal',
                    'italic' => 'Italic',
                    'oblique' => 'Oblique',
                ],

            ]
        );

        $this->add_control(
            'inner_datalabels_font_weight',
            [
                'label' => esc_html__('Font Weight ', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'default' => 600,
                'frontend_available' => true
            ]
        );

        $this->add_control(
            'inner_datalabels_font_size',
            [
                'label' => esc_html__('Font Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 14,
                ]
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_styles_chart_axis_r',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Axis', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'chart_type' => ['radar', 'polarArea']
                ],
            ]
        );

        $this->add_control(
            'r_axis_angle_lines_heading',
            [
                'label' => esc_html__('Angle Lines', 'king-addons'),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'angle_lines_color', [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#E7E7E7'
            ]
        );

        $this->add_control(
            'r_axis_grid_lines_heading',
            [
                'label' => esc_html__('Grid Lines', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'axis_grid_line_color_r', [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#E7E7E7'
            ]
        );

        $this->add_control(
            'axis_labels_heading',
            [
                'label' => esc_html__('Axis Labels', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'axis_labels_color', [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#222222'
            ]
        );

        $this->add_control(
            'axis_labels_bg_color', [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#B2B2B200'
            ]
        );

        $this->add_control(
            'axis_labels_padding',
            [
                'label' => esc_html__('Padding', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 5,
                ],
            ]
        );

        $this->add_control(
            'chart_point_labels_heading',
            [
                'label' => esc_html__('Ticks', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'chart_point_labels_color_r', [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#B2B2B2'
            ]
        );

        $this->add_control(
            'point_labels_font_family_r',
            [
                'label' => esc_html__('Font Family', 'king-addons'),
                'type' => Controls_Manager::FONT,
                'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'),
                'default' => 'Arial',
            ]
        );

        $this->add_control(
            'point_labels_font_style_r',
            [
                'label' => esc_html__('Font Style', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'normal',
                'options' => [
                    'normal' => 'Normal',
                    'italic' => 'Italic',
                    'oblique' => 'Oblique',
                ],

            ]
        );

        $this->add_control(
            'point_labels_font_weight_r',
            [
                'label' => esc_html__('Font Weight ', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'default' => 600,
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'point_labels_font_size_r',
            [
                'label' => esc_html__('Font Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 14,
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_chart_axis_styles',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Axis', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'chart_type' => ['bar', 'bar_horizontal', 'line']
                ],
            ]
        );

        $this->add_control(
            'x_axis_grid_lines_heading',
            [
                'label' => esc_html__('Grid Lines (X)', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'axis_grid_line_color_x', [
                'label' => esc_html__('Color (X)', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#999999'
            ]
        );

        $this->add_control(
            'y_axis_grid_lines_heading',
            [
                'label' => esc_html__('Grid Lines (Y)', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'axis_grid_line_color_y', [
                'label' => esc_html__('Color (Y)', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#999999'
            ]
        );

        $this->add_control(
            'x_axis_title_styles_heading',
            [
                'label' => esc_html__('X-Title', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'axis_title_color_x', [
                'label' => esc_html__('Color (X)', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#C0C0C0'
            ]
        );

        $this->add_control(
            'axis_title_font_family_x',
            [
                'label' => esc_html__('Font Family', 'king-addons'),
                'type' => Controls_Manager::FONT,
                'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'),
                'default' => 'Arial',
            ]
        );

        $this->add_control(
            'axis_title_font_style_x',
            [
                'label' => esc_html__('Font Style', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'normal',
                'options' => [
                    'normal' => 'Normal',
                    'italic' => 'Italic',
                    'oblique' => 'Oblique',
                ],

            ]
        );

        $this->add_control(
            'axis_title_font_weight_x',
            [
                'label' => esc_html__('Font Weight ', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'default' => 600,
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'axis_title_font_size_x',
            [
                'label' => esc_html__('Font Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 14,
                ],
            ]
        );

        $this->add_control(
            'y_axis_title_styles_heading',
            [
                'label' => esc_html__('Y-Title', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'axis_title_color_y', [
                'label' => esc_html__('Color (Y)', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#C0C0C0'
            ]
        );

        $this->add_control(
            'axis_title_font_family_y',
            [
                'label' => esc_html__('Font Family', 'king-addons'),
                'type' => Controls_Manager::FONT,
                'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'),
                'default' => 'Arial',
            ]
        );

        $this->add_control(
            'axis_title_font_style_y',
            [
                'label' => esc_html__('Font Style', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'normal',
                'options' => [
                    'normal' => 'Normal',
                    'italic' => 'Italic',
                    'oblique' => 'Oblique',
                ],

            ]
        );

        $this->add_control(
            'axis_title_font_weight_y',
            [
                'label' => esc_html__('Font Weight ', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'default' => 600,
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'axis_title_font_size_y',
            [
                'label' => esc_html__('Font Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 14,
                ],
            ]
        );

        $this->add_control(
            'x_ticks_styles_heading',
            [
                'label' => esc_html__('X-Ticks', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'chart_ticks_color_x', [
                'label' => esc_html__('Ticks Color (X)', 'king-addons'),
                'type' => Controls_Manager::COLOR,
            ]
        );

        $this->add_control(
            'ticks_font_family_x',
            [
                'label' => esc_html__('Font Family', 'king-addons'),
                'type' => Controls_Manager::FONT,
                'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'),
                'default' => 'Arial',
            ]
        );

        $this->add_control(
            'ticks_font_style_x',
            [
                'label' => esc_html__('Font Style', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'normal',
                'options' => [
                    'normal' => 'Normal',
                    'italic' => 'Italic',
                    'oblique' => 'Oblique',
                ],

            ]
        );

        $this->add_control(
            'ticks_font_weight_x',
            [
                'label' => esc_html__('Font Weight ', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'default' => 600,
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'ticks_font_size_x',
            [
                'label' => esc_html__('Font Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 17,
                ],
            ]
        );

        $this->add_control(
            'ticks_padding_x',
            [
                'label' => esc_html__('Distance', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                    ],
                ],
                'size_units' => ['px'],
                'default' => [
                    'unit' => 'px',
                    'size' => 10,
                ]
            ]
        );

        $this->add_control(
            'y_ticks_styles_heading',
            [
                'label' => esc_html__('Y-Ticks', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'chart_ticks_color_y', [
                'label' => esc_html__('Ticks Color (Y)', 'king-addons'),
                'type' => Controls_Manager::COLOR,
            ]
        );

        $this->add_control(
            'ticks_font_family_y',
            [
                'label' => esc_html__('Font Family', 'king-addons'),
                'type' => Controls_Manager::FONT,
                'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'),
                'default' => 'Arial',
            ]
        );

        $this->add_control(
            'ticks_font_style_y',
            [
                'label' => esc_html__('Font Style', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'normal',
                'options' => [
                    'normal' => 'Normal',
                    'italic' => 'Italic',
                    'oblique' => 'Oblique',
                ],

            ]
        );

        $this->add_control(
            'ticks_font_weight_y',
            [
                'label' => esc_html__('Font Weight ', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'default' => 600,
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'ticks_font_size_y',
            [
                'label' => esc_html__('Font Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 14,
                ],
            ]
        );

        $this->add_control(
            'ticks_padding_y',
            [
                'label' => esc_html__('Distance', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                    ],
                ],
                'size_units' => ['px'],
                'default' => [
                    'unit' => 'px',
                    'size' => 10,
                ]
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_chart_title_styles',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Title', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'show_chart_title' => 'yes'
                ]
            ]
        );

        $this->add_control(
            'chart_title_color', [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
            ]
        );

        $this->add_control(
            'title_font_family',
            [
                'label' => esc_html__('Font Family', 'king-addons'),
                'type' => Controls_Manager::FONT,
                'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'),
                'default' => 'Arial',
            ]
        );

        $this->add_control(
            'title_font_style',
            [
                'label' => esc_html__('Font Style', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'normal',
                'options' => [
                    'normal' => 'Normal',
                    'italic' => 'Italic',
                    'oblique' => 'Oblique',
                ],

            ]
        );

        $this->add_control(
            'title_font_weight',
            [
                'label' => esc_html__('Font Weight ', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'default' => 600,
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'title_font_size',
            [
                'label' => esc_html__('Font Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 14,
                ],
            ]
        );

        $this->add_control(
            'chart_title_padding',
            [
                'label' => esc_html__('Padding', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                    ],
                ],
                'size_units' => ['px'],
                'default' => [
                    'unit' => 'px',
                    'size' => 10,
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_chart_legend_styles',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Legend', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'chart_legend_text_color', [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#222222'
            ]
        );

        $this->add_control(
            'legend_font_family',
            [
                'label' => esc_html__('Font Family', 'king-addons'),
                'type' => Controls_Manager::FONT,
                'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'),
                'default' => 'Arial',
            ]
        );

        $this->add_control(
            'legend_font_style',
            [
                'label' => esc_html__('Font Style', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'normal',
                'options' => [
                    'normal' => 'Normal',
                    'italic' => 'Italic',
                    'oblique' => 'Oblique',
                ],

            ]
        );

        $this->add_control(
            'legend_font_weight',
            [
                'label' => esc_html__('Font Weight ', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'default' => 600,
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'legend_font_size',
            [
                'label' => esc_html__('Font Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 14,
                ],
            ]
        );

        $this->add_control(
            'legend_box_width',
            [
                'label' => esc_html__('Box Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 200,
                    ],
                ],
                'size_units' => ['px'],
                'default' => [
                    'unit' => 'px',
                    'size' => 40,
                ]
            ]
        );

        $this->add_control(
            'chart_legend_padding',
            [
                'label' => esc_html__('Gutter', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                    ],
                ],
                'size_units' => ['px'],
                'default' => [
                    'unit' => 'px',
                    'size' => 10,
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_chart_tooltip_styles',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Tooltip', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'show_chart_tooltip' => 'yes'
                ]
            ]
        );

        $this->add_control(
            'chart_tooltip_bg_color', [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
            ]
        );

        $this->add_control(
            'tooltip_padding',
            [
                'label' => esc_html__('Padding', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 5,
                ],
            ]
        );

        $this->add_responsive_control(
            'tooltip_caret_size',
            [
                'label' => esc_html__('Triangle Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'devices' => ['desktop', 'mobile'],
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 10,
                ],
                'mobile_default' => [
                    'unit' => 'px',
                    'size' => 6,
                ],
            ]
        );

        $this->add_control(
            'tooltip_title_heading',
            [
                'label' => esc_html__('Tooltip Title', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'chart_tooltip_title_color', [
                'label' => esc_html__('Title Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#FFF'
            ]
        );

        $this->add_control(
            'chart_tooltip_title_font',
            [
                'label' => esc_html__('Font Family', 'king-addons'),
                'type' => Controls_Manager::FONT,
                'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'),
                'default' => 'Arial',
            ]
        );

        $this->add_control(
            'chart_tooltip_title_font_size',
            [
                'label' => esc_html__('Font Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 14,
                ],
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'chart_tooltip_title_margin_bottom',
            [
                'label' => esc_html__('Title Spacing', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                    ],
                ],
                'size_units' => ['px'],
                'default' => [
                    'unit' => 'px',
                    'size' => 10,
                ],
            ]
        );

        $this->add_control(
            'chart_tooltip_title_align',
            [
                'label' => esc_html__('Title Alignment', 'king-addons'),
                'type' => Controls_Manager::CHOOSE,
                'default' => 'center',
                'label_block' => false,
                'options' => [
                    'left' => [
                        'title' => esc_html__('Left', 'king-addons'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__('Center', 'king-addons'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => esc_html__('Right', 'king-addons'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'tooltip_item_heading',
            [
                'label' => esc_html__('Tooltip Item', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'chart_tooltip_item_color', [
                'label' => esc_html__('Item Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#FFF'
            ]
        );

        $this->add_control(
            'chart_tooltip_item_font',
            [
                'label' => esc_html__('Font Family', 'king-addons'),
                'type' => Controls_Manager::FONT,
                'description' => esc_html__('Use only the fonts located under System options group', 'king-addons'),
                'default' => 'Arial',
            ]
        );

        $this->add_control(
            'chart_tooltip_item_font_size',
            [
                'label' => esc_html__('Font Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 14,
                ],
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'chart_tooltip_item_spacing',
            [
                'label' => esc_html__('Item Spacing', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                    ],
                ],
                'size_units' => ['px'],
                'default' => [
                    'unit' => 'px',
                    'size' => 10,
                ],
            ]
        );

        $this->add_control(
            'chart_tooltip_item_align',
            [
                'label' => esc_html__('Item Alignment', 'king-addons'),
                'type' => Controls_Manager::CHOOSE,
                'default' => 'center',
                'label_block' => false,
                'options' => [
                    'left' => [
                        'title' => esc_html__('Left', 'king-addons'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__('Center', 'king-addons'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => esc_html__('Right', 'king-addons'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'separator' => 'before'
            ]
        );

        
        

$this->end_controls_section();
    
        
    }

    protected function render()
    {
        $settings = $this->get_settings_for_display();
        // Security fix: Extract only specific safe settings to prevent variable injection
        $chart_type = $settings['chart_type'] ?? '';
        $charts_labels_data = $settings['charts_labels_data'] ?? '';
        $charts_datasets_data = $settings['charts_datasets_data'] ?? '';
        $chart_title = $settings['chart_title'] ?? '';
        $chart_title_show = $settings['chart_title_show'] ?? '';
        $chart_legend_show = $settings['chart_legend_show'] ?? '';
        $chart_tooltips_show = $settings['chart_tooltips_show'] ?? '';
        $chart_options = $settings['chart_options'] ?? '';
        $chart_height = $settings['chart_height'] ?? '';
        $chart_width = $settings['chart_width'] ?? '';
        $chart_responsive = $settings['chart_responsive'] ?? '';
        $chart_maintain_aspect_ratio = $settings['chart_maintain_aspect_ratio'] ?? '';
        $chart_animation_duration = $settings['chart_animation_duration'] ?? '';
        $chart_animation_easing = $settings['chart_animation_easing'] ?? '';
        $chart_show_labels = $settings['chart_show_labels'] ?? '';
        $chart_label_position = $settings['chart_label_position'] ?? '';
        $chart_label_color = $settings['chart_label_color'] ?? '';
        $chart_label_font_size = $settings['chart_label_font_size'] ?? '';
        $chart_label_font_family = $settings['chart_label_font_family'] ?? '';
        $chart_label_font_style = $settings['chart_label_font_style'] ?? '';
        $chart_label_font_weight = $settings['chart_label_font_weight'] ?? '';
        $chart_grid_lines = $settings['chart_grid_lines'] ?? '';
        $chart_grid_color = $settings['chart_grid_color'] ?? '';
        $chart_grid_line_width = $settings['chart_grid_line_width'] ?? '';
        $chart_point_radius = $settings['chart_point_radius'] ?? '';
        $chart_point_hover_radius = $settings['chart_point_hover_radius'] ?? '';
        $chart_point_background_color = $settings['chart_point_background_color'] ?? '';
        $chart_point_border_color = $settings['chart_point_border_color'] ?? '';
        $chart_point_border_width = $settings['chart_point_border_width'] ?? '';
        $chart_line_tension = $settings['chart_line_tension'] ?? '';
        $chart_line_border_width = $settings['chart_line_border_width'] ?? '';
        $chart_line_border_color = $settings['chart_line_border_color'] ?? '';
        $chart_line_background_color = $settings['chart_line_background_color'] ?? '';
        $chart_bar_border_width = $settings['chart_bar_border_width'] ?? '';
        $chart_bar_border_color = $settings['chart_bar_border_color'] ?? '';
        $chart_bar_background_color = $settings['chart_bar_background_color'] ?? '';
        $chart_doughnut_cutout = $settings['chart_doughnut_cutout'] ?? '';
        $chart_doughnut_circumference = $settings['chart_doughnut_circumference'] ?? '';
        $chart_doughnut_rotation = $settings['chart_doughnut_rotation'] ?? '';
        $chart_polar_area_start_angle = $settings['chart_polar_area_start_angle'] ?? '';
        $chart_polar_area_start_angle = $settings['chart_polar_area_start_angle'] ?? '';
        $chart_radar_point_labels = $settings['chart_radar_point_labels'] ?? '';
        $chart_radar_angle_lines = $settings['chart_radar_angle_lines'] ?? '';
        $chart_radar_grid_lines = $settings['chart_radar_grid_lines'] ?? '';
        $chart_radar_point_radius = $settings['chart_radar_point_radius'] ?? '';
        $chart_radar_point_hover_radius = $settings['chart_radar_point_hover_radius'] ?? '';
        $chart_radar_point_background_color = $settings['chart_radar_point_background_color'] ?? '';
        $chart_radar_point_border_color = $settings['chart_radar_point_border_color'] ?? '';
        $chart_radar_point_border_width = $settings['chart_radar_point_border_width'] ?? '';
        $chart_radar_line_tension = $settings['chart_radar_line_tension'] ?? '';
        $chart_radar_line_border_width = $settings['chart_radar_line_border_width'] ?? '';
        $chart_radar_line_border_color = $settings['chart_radar_line_border_color'] ?? '';
        $chart_radar_line_background_color = $settings['chart_radar_line_background_color'] ?? '';

        // Additional chart settings
        $charts_data_set = $settings['charts_data_set'] ?? '';
        $animation_transition_type = $settings['animation_transition_type'] ?? '';
        $axis_grid_line_color_r = $settings['axis_grid_line_color_r'] ?? '';
        $axis_grid_line_color_x = $settings['axis_grid_line_color_x'] ?? '';
        $axis_grid_line_color_y = $settings['axis_grid_line_color_y'] ?? '';
        $axis_title_color_x = $settings['axis_title_color_x'] ?? '';
        $axis_title_color_y = $settings['axis_title_color_y'] ?? '';
        $axis_title_font_family_x = $settings['axis_title_font_family_x'] ?? '';
        $axis_title_font_family_y = $settings['axis_title_font_family_y'] ?? '';
        $axis_title_font_style_x = $settings['axis_title_font_style_x'] ?? '';
        $axis_title_font_style_y = $settings['axis_title_font_style_y'] ?? '';
        $axis_title_font_weight_x = $settings['axis_title_font_weight_x'] ?? '';
        $axis_title_font_weight_y = $settings['axis_title_font_weight_y'] ?? '';
        $border_dash_length = $settings['border_dash_length'] ?? '';
        $border_dash_length_r = $settings['border_dash_length_r'] ?? '';
        $border_dash_offset = $settings['border_dash_offset'] ?? '';
        $border_dash_offset_r = $settings['border_dash_offset_r'] ?? '';
        $border_dash_spacing = $settings['border_dash_spacing'] ?? '';
        $border_dash_spacing_r = $settings['border_dash_spacing_r'] ?? '';
        $chart_interaction_mode = $settings['chart_interaction_mode'] ?? '';
        $chart_tooltip_bg_color = $settings['chart_tooltip_bg_color'] ?? '';
        $chart_tooltip_item_align = $settings['chart_tooltip_item_align'] ?? '';
        $chart_tooltip_item_color = $settings['chart_tooltip_item_color'] ?? '';
        $chart_tooltip_item_font = $settings['chart_tooltip_item_font'] ?? '';
        $chart_tooltip_title_align = $settings['chart_tooltip_title_align'] ?? '';
        $chart_tooltip_title_color = $settings['chart_tooltip_title_color'] ?? '';
        $chart_tooltip_title_font = $settings['chart_tooltip_title_font'] ?? '';
        $data_source = $settings['data_source'] ?? '';
        $display_r_axis = $settings['display_r_axis'] ?? '';
        $display_r_ticks = $settings['display_r_ticks'] ?? '';
        $display_x_axis = $settings['display_x_axis'] ?? '';
        $display_x_axis_title = $settings['display_x_axis_title'] ?? '';
        $display_x_ticks = $settings['display_x_ticks'] ?? '';
        $display_y_axis = $settings['display_y_axis'] ?? '';
        $display_y_axis_title = $settings['display_y_axis_title'] ?? '';
        $display_y_ticks = $settings['display_y_ticks'] ?? '';
        $exclude_dataset_on_click = $settings['exclude_dataset_on_click'] ?? '';
        $grid_line_width_r = $settings['grid_line_width_r'] ?? '';
        $grid_line_width_x = $settings['grid_line_width_x'] ?? '';
        $grid_line_width_y = $settings['grid_line_width_y'] ?? '';
        $inner_datalabels = $settings['inner_datalabels'] ?? '';
        $inner_datalabels_color = $settings['inner_datalabels_color'] ?? '';
        $charts_legend_align = $settings['charts_legend_align'] ?? '';
        $legend_box_width = $settings['legend_box_width'] ?? '';
        $legend_font_family = $settings['legend_font_family'] ?? '';
        $legend_font_size = $settings['legend_font_size'] ?? '';
        $legend_font_style = $settings['legend_font_style'] ?? '';
        $legend_font_weight = $settings['legend_font_weight'] ?? '';
        $chart_legend_padding = $settings['chart_legend_padding'] ?? '';
        $charts_legend_position = $settings['charts_legend_position'] ?? '';
        $charts_legend_shape = $settings['charts_legend_shape'] ?? '';
        $chart_legend_text_color = $settings['chart_legend_text_color'] ?? '';
        $max_value = $settings['max_value'] ?? '';
        $min_value = $settings['min_value'] ?? '';
        $point_labels_font_family_r = $settings['point_labels_font_family_r'] ?? '';
        $point_labels_font_style_r = $settings['point_labels_font_style_r'] ?? '';
        $point_labels_font_weight_r = $settings['point_labels_font_weight_r'] ?? '';
        $r_step_size = $settings['r_step_size'] ?? '';
        $reverse_legend = $settings['reverse_legend'] ?? '';
        $reverse_x = $settings['reverse_x'] ?? '';
        $reverse_y = $settings['reverse_y'] ?? '';
        $labels_rotation_x_axis = $settings['labels_rotation_x_axis'] ?? '';
        $labels_rotation_y_axis = $settings['labels_rotation_y_axis'] ?? '';
        $data_csv_separator = $settings['data_csv_separator'] ?? '';
        $show_chart_legend = $settings['show_chart_legend'] ?? '';
        $show_chart_title = $settings['show_chart_title'] ?? '';
        $show_chart_tooltip = $settings['show_chart_tooltip'] ?? '';
        $chart_ticks_color_x = $settings['chart_ticks_color_x'] ?? '';
        $ticks_font_family_x = $settings['ticks_font_family_x'] ?? '';
        $ticks_font_family_y = $settings['ticks_font_family_y'] ?? '';
        $ticks_font_style_x = $settings['ticks_font_style_x'] ?? '';
        $ticks_font_style_y = $settings['ticks_font_style_y'] ?? '';
        $ticks_font_weight_x = $settings['ticks_font_weight_x'] ?? '';
        $ticks_font_weight_y = $settings['ticks_font_weight_y'] ?? '';
        $title_font_family = $settings['title_font_family'] ?? '';
        $title_font_weight = $settings['title_font_weight'] ?? '';
        $tooltips_percent = $settings['tooltips_percent'] ?? '';
        $chart_tooltip_position = $settings['chart_tooltip_position'] ?? '';
        $trigger_tooltip_on = $settings['trigger_tooltip_on'] ?? '';
        $data_source_csv_file = $settings['data_source_csv_file'] ?? '';
        $x_axis_title = $settings['x_axis_title'] ?? '';
        $x_step_size = $settings['x_step_size'] ?? '';
        $y_axis_title = $settings['y_axis_title'] ?? '';
        $y_step_size = $settings['y_step_size'] ?? '';

        $premium = king_addons_freemius()->can_use_premium_code__premium_only();
        $data_charts_array = [];

        if (in_array($chart_type, ['bar', 'bar_horizontal', 'line', 'radar'])) {
            if (!empty($charts_labels_data)) {
                $labels = explode(',', trim($charts_labels_data));
                if (!$premium && count($labels) > 3) {
                    $labels = array_slice($labels, 0, 3);
                }
                $data_charts_array['labels'] = $labels;
            }

            if (is_array($charts_data_set) && count($charts_data_set)) {
                foreach ($charts_data_set as $charts_counter => $chart_data) {
                    if (!$premium && $charts_counter === 3) break;
                    $data_charts_array['datasets'][] = [
                        'label' => $chart_data['chart_data_label'],
                        'data' => array_map('floatval', explode(',', trim($chart_data['chart_data_set'], ','))),
                        'backgroundColor' => $chart_data['chart_data_background_color'],
                        'hoverBackgroundColor' => $chart_data['chart_data_background_color_hover'],
                        'borderColor' => $chart_data['chart_data_border_color'],
                        'hoverBorderColor' => $chart_data['chart_data_border_color_hover'],
                        'borderWidth' => $chart_data['chart_data_border_width'],
                        'barPercentage' => $settings['column_width_x'] ?? '',
                        'fill' => !empty($settings['chart_type_line_fill']) && 'yes' === $settings['chart_type_line_fill'],
                    ];
                }
            }
        } else {
            if (is_array($charts_data_set) && count($charts_data_set) && $settings['data_source'] !== 'csv') {
                $chart_data_number_values = $chart_background_colors = $chart_background_hover_colors = [];
                $chart_data_border_colors = $chart_data_border_hover_colors = $chart_data_border_width = $chart_data_bar_percentage = [];
                $data_charts_array['labels'] = [];

                foreach ($charts_data_set as $labels_data) {
                    if (!$premium && count($data_charts_array['labels']) === 3) break;
                    $data_charts_array['labels'][] = $labels_data['chart_data_label'];
                }

                $data_charts_array_test = !empty($charts_labels_data) ? explode(',', trim($charts_labels_data)) : [];

                foreach ($data_charts_array_test as $key => $test_data) {
                    if (!$premium && $key === 3) break;
                    $chart_data_number_values[$key] = [];
                    foreach ($charts_data_set as $key_inner => $chart_data) {
                        if (!$premium && $key_inner === 3) break;
                        $numbers = array_map('floatval', explode(',', trim($chart_data['chart_data_set'], ',')));
                        $chart_data_number_values[$key][] = $numbers[$key] ?? '0';
                    }
                }

                foreach ($charts_data_set as $key => $chart_data) {
                    if (!$premium && $key === 3) break;
                    $chart_background_colors[] = trim($chart_data['chart_data_background_color']);
                    $chart_background_hover_colors[] = trim($chart_data['chart_data_background_color_hover']);
                    $chart_data_border_colors[] = trim($chart_data['chart_data_border_color']);
                    $chart_data_border_hover_colors[] = trim($chart_data['chart_data_border_color_hover']);
                    $chart_data_border_width[] = trim($chart_data['chart_data_border_width']);
                    if (!empty($settings['column_width_x'])) {
                        $chart_data_bar_percentage[] = trim($chart_data['column_width_x']);
                    }
                }

                foreach ($data_charts_array_test as $key => $data_test) {
                    if (!$premium && $key === 3) break;
                    $data_charts_array['datasets'][] = [
                        'label' => $data_test,
                        'data' => $chart_data_number_values[$key],
                        'backgroundColor' => $chart_background_colors,
                        'hoverBackgroundColor' => $chart_background_hover_colors,
                        'borderColor' => $chart_data_border_colors,
                        'hoverBorderColor' => $chart_data_border_hover_colors,
                        'borderWidth' => $chart_data_border_width,
                        'barPercentage' => $chart_data_bar_percentage,
                    ];
                }
            }
        }

        $layout_settings = [
            'angle_lines_color' => $angle_lines_color ?? '',
            'animation_transition_type' => $animation_transition_type,
            'axis_grid_line_color_r' => $axis_grid_line_color_r,
            'axis_grid_line_color_x' => $axis_grid_line_color_x,
            'axis_grid_line_color_y' => $axis_grid_line_color_y,
            'axis_labels_bg_color' => $axis_labels_bg_color ?? '',
            'axis_labels_color' => $axis_labels_color ?? '',
            'axis_labels_padding' => $axis_labels_padding['size'] ?? '',
            'axis_title_color_x' => $axis_title_color_x,
            'axis_title_color_y' => $axis_title_color_y,
            'axis_title_font_family_x' => $axis_title_font_family_x,
            'axis_title_font_family_y' => $axis_title_font_family_y,
            'axis_title_font_size_x' => $axis_title_font_size_x['size'] ?? '',
            'axis_title_font_size_y' => $axis_title_font_size_y['size'] ?? '',
            'axis_title_font_style_x' => $axis_title_font_style_x,
            'axis_title_font_style_y' => $axis_title_font_style_y,
            'axis_title_font_weight_x' => $axis_title_font_weight_x,
            'axis_title_font_weight_y' => $axis_title_font_weight_y,
            'border_dash_length' => $border_dash_length,
            'border_dash_length_r' => $border_dash_length_r,
            'border_dash_offset' => $border_dash_offset,
            'border_dash_offset_r' => $border_dash_offset_r,
            'border_dash_spacing' => $border_dash_spacing,
            'border_dash_spacing_r' => $border_dash_spacing_r,
            'chart_animation' => $chart_animation ?? '',
            'chart_animation_duration' => $chart_animation_duration ?? '',
            'chart_animation_loop' => $chart_animation_loop ?? '',
            'chart_datasets' => !empty($data_charts_array['datasets']) ? wp_json_encode($data_charts_array['datasets']) : '',
            'chart_interaction_mode' => $chart_interaction_mode,
            'chart_labels' => $data_charts_array['labels'] ?? '',
            'chart_title' => $chart_title ?? '',
            'chart_title_align' => $chart_title_align ?? '',
            'chart_title_color' => $chart_title_color ?? '',
            'chart_title_position' => $chart_title_position ?? '',
            'chart_tooltip_bg_color' => $chart_tooltip_bg_color,
            'chart_tooltip_item_align' => $chart_tooltip_item_align,
            'chart_tooltip_item_color' => $chart_tooltip_item_color,
            'chart_tooltip_item_font' => $chart_tooltip_item_font,
            'chart_tooltip_item_font_size' => $chart_tooltip_item_font_size['size'] ?? 1,
            'chart_tooltip_item_spacing' => $chart_tooltip_item_spacing['size'] ?? 1,
            'chart_tooltip_title_align' => $chart_tooltip_title_align,
            'chart_tooltip_title_color' => $chart_tooltip_title_color,
            'chart_tooltip_title_font' => $chart_tooltip_title_font,
            'chart_tooltip_title_font_size' => $chart_tooltip_title_font_size['size'] ?? 1,
            'chart_tooltip_title_margin_bottom' => $chart_tooltip_title_margin_bottom['size'] ?? 1,
            'chart_type' => $chart_type,
            'data_source' => $data_source,
            'data_type' => $settings['data_type'] ?? 'linear',
            'display_r_axis' => $display_r_axis,
            'display_r_ticks' => $display_r_ticks,
            'display_x_axis' => $display_x_axis,
            'display_x_axis_title' => $display_x_axis_title,
            'display_x_ticks' => $display_x_ticks,
            'display_y_axis' => $display_y_axis,
            'display_y_axis_title' => $display_y_axis_title,
            'display_y_ticks' => $display_y_ticks,
            'exclude_dataset_on_click' => $exclude_dataset_on_click,
            'grid_line_width_r' => $grid_line_width_r,
            'grid_line_width_x' => $grid_line_width_x,
            'grid_line_width_y' => $grid_line_width_y,
            'inner_datalabels' => $inner_datalabels,
            'inner_datalabels_color' => $inner_datalabels_color,
            'inner_datalabels_font_family' => $inner_datalabels_font_family ?? '',
            'inner_datalabels_font_size' => $inner_datalabels_font_size['size'] ?? '',
            'inner_datalabels_font_style' => $inner_datalabels_font_style ?? '',
            'inner_datalabels_font_weight' => $inner_datalabels_font_weight ?? '',
            'legend_align' => $charts_legend_align,
            'legend_box_width' => $legend_box_width['size'],
            'legend_font_family' => $legend_font_family,
            'legend_font_size' => $legend_font_size['size'],
            'legend_font_style' => $legend_font_style,
            'legend_font_weight' => $legend_font_weight,
            'legend_padding' => $chart_legend_padding['size'],
            'legend_position' => $charts_legend_position,
            'legend_shape' => $charts_legend_shape,
            'legend_text_color' => $chart_legend_text_color,
            'line_dots' => $line_dots ?? '',
            'line_dots_radius' => $line_dots_radius['size'] ?? '',
            'line_dots_radius_mobile' => $line_dots_radius_mobile['size'] ?? 0,
            'max_value' => $max_value,
            'min_value' => $min_value,
            'point_labels_color_r' => $chart_point_labels_color_r ?? '',
            'point_labels_font_family_r' => $point_labels_font_family_r,
            'point_labels_font_size_r' => $point_labels_font_size_r['size'] ?? '',
            'point_labels_font_style_r' => $point_labels_font_style_r,
            'point_labels_font_weight_r' => $point_labels_font_weight_r,
            'r_step_size' => $r_step_size,
            'reverse_legend' => $reverse_legend,
            'reverse_x' => $reverse_x,
            'reverse_y' => $reverse_y,
            'rotation_x' => $labels_rotation_x_axis,
            'rotation_y' => $labels_rotation_y_axis,
            'separator' => $data_csv_separator,
            'show_chart_legend' => $show_chart_legend,
            'show_chart_title' => $show_chart_title,
            'show_chart_tooltip' => $show_chart_tooltip,
            'show_lines' => $show_lines ?? '',
            'stacked_bar_chart' => $stacked_bar_chart ?? '',
            'ticks_color_x' => $chart_ticks_color_x,
            'ticks_color_y' => $chart_ticks_color_y ?? '',
            'ticks_font_family_x' => $ticks_font_family_x,
            'ticks_font_family_y' => $ticks_font_family_y,
            'ticks_font_size_x' => $ticks_font_size_x['size'] ?? '',
            'ticks_font_size_y' => $ticks_font_size_y['size'] ?? '',
            'ticks_font_style_x' => $ticks_font_style_x,
            'ticks_font_style_y' => $ticks_font_style_y,
            'ticks_font_weight_x' => $ticks_font_weight_x,
            'ticks_font_weight_y' => $ticks_font_weight_y,
            'ticks_padding_x' => $ticks_padding_x['size'] ?? '',
            'ticks_padding_y' => $ticks_padding_y['size'] ?? '',
            'title_font_family' => $title_font_family,
            'title_font_size' => $title_font_size['size'] ?? '',
            'title_font_style' => $title_font_style ?? '',
            'title_font_weight' => $title_font_weight,
            'title_padding' => $chart_title_padding['size'] ?? '',
            'tooltips_percent' => $tooltips_percent,
            'tooltip_caret_size' => $tooltip_caret_size['size'] ?? 1,
            'tooltip_caret_size_mobile' => $tooltip_caret_size_mobile['size'] ?? 0,
            'tooltip_padding' => $tooltip_padding['size'] ?? 1,
            'tooltip_position' => $chart_tooltip_position,
            'trigger_tooltip_on' => $trigger_tooltip_on,
            'url' => !empty($data_source_csv_url) ? $data_source_csv_url : (!empty($data_source_csv_file['url']) ? $data_source_csv_file['url'] : ''),
            'x_axis_title' => $x_axis_title,
            'x_step_size' => $x_step_size,
            'y_axis_title' => $y_axis_title,
            'y_step_size' => $y_step_size,
        ];

        $this->add_render_attribute('chart-settings', [
            'class' => 'king-addons-charts-container',
            'data-settings' => wp_json_encode($layout_settings),
        ]);

        echo '<div ' . $this->get_render_attribute_string('chart-settings') . '>';
        if ($data_source === 'csv') {
            echo '<span class="king-addons-rotating-plane"></span>';
        }
        echo '<div class="king-addons-charts-wrapper">';
        echo '<canvas class="king-addons-chart"></canvas>';
        echo '</div></div>';
    }

}