<?php
namespace PowerpackElements\Modules\Charts\Widgets;

use PowerpackElements\Base\Powerpack_Widget;

// Elementor Classes
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Utils;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Image_Size;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use Elementor\Modules\DynamicTags\Module as TagsModule;

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

/**
 * Advanced Charts Widget
 */
class Charts extends Powerpack_Widget {

	/**
	 * Retrieve advanced charts widget name.
	 *
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return parent::get_widget_name( 'Charts' );
	}

	/**
	 * Retrieve advanced charts widget title.
	 *
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return parent::get_widget_title( 'Charts' );
	}

	/**
	 * Retrieve advanced charts widget icon.
	 *
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return parent::get_widget_icon( 'Charts' );
	}

	/**
	 * Get widget keywords.
	 *
	 * Retrieve the list of keywords the advanced charts widget belongs to.
	 *
	 * @access public
	 *
	 * @return array Widget keywords.
	 */
	public function get_keywords() {
		return parent::get_widget_keywords( 'Charts' );
	}

	/**
	 * Retrieve the list of scripts the advanced charts widget depended on.
	 *
	 * Used to set scripts dependencies required to run the widget.
	 *
	 * @access public
	 *
	 * @return array Widget scripts dependencies.
	 */
	public function get_script_depends() {
		return [
			'pp-chartjs',
			'pp-chart',
		];
	}

	protected function is_dynamic_content(): bool {
		return true;
	}

	/**
	 * Register advanced charts widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @since 2.12.0
	 * @access protected
	 */
	protected function register_controls() {
		// Content tab
		$this->register_content_charts_controls();
		$this->register_content_dataset_controls();
		$this->register_content_legend_controls();
		$this->register_content_tooltip_controls();
		$this->register_content_chart_title_controls();
		$this->register_content_options_controls();

		// Style tab
		$this->register_style_chart_controls();
		$this->register_style_chart_title_controls();
		$this->register_style_grid_controls();
		$this->register_style_labels_controls();
		$this->register_style_legend_controls();
		$this->register_style_points_controls();
		$this->register_style_tooltip_controls();
	}

	protected function register_content_charts_controls() {
		$this->start_controls_section(
			'section_charts',
			[
				'label' => esc_html__( 'Advanced Charts', 'powerpack' ),
			]
		);

		$this->add_control(
			'chart_type',
			[
				'label'   => esc_html__( 'Chart Type', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'line',
				'options' => [
					'line'      => esc_html__( 'Line', 'powerpack' ),
					'bar'       => esc_html__( 'Bar', 'powerpack' ),
					'radar'     => esc_html__( 'Radar', 'powerpack' ),
					'pie'       => esc_html__( 'Pie', 'powerpack' ),
					'doughnut'  => esc_html__( 'Doughnut', 'powerpack' ),
					'polarArea' => esc_html__( 'Polar Area', 'powerpack' ),
					'bubble'    => esc_html__( 'Bubble', 'powerpack' ),
				],
			]
		);

		$this->add_control(
			'stepped_line',
			[
				'label'     => esc_html__( 'Stepped Line Chart', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'default'   => '',
				'condition' => [
					'chart_type' => 'line',
				],
			]
		);

		$this->add_control(
			'bar_chart_type',
			[
				'label'   => esc_html__( 'Orientation', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'vertical_bar',
				'options' => [
					'vertical_bar'   => esc_html__( 'Vertical Bar', 'powerpack' ),
					'horizontal_bar' => esc_html__( 'Horizontal Bar', 'powerpack' ),
				],
				'condition' => [
					'chart_type' => 'bar',
				],
			]
		);

		$this->add_control(
			'labels',
			[
				'label'       => esc_html__( 'Labels', 'powerpack' ),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => esc_html__( 'January, February, March, April', 'powerpack' ),
				'description' => esc_html__( 'Add labels separated by comma', 'powerpack' ),
				'dynamic'     => [ 'active' => true ],
			]
		);

		$this->end_controls_section();
	}

	protected function register_content_dataset_controls() {
		$this->start_controls_section(
			'section_chart_dataset',
			[
				'label' => esc_html__( 'Dataset', 'powerpack' ),
			],
		);

		$this->add_control(
			'source',
			[
				'label'   => esc_html__( 'Source', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'custom',
				'options' => [
					'custom'        => esc_html__( 'Custom', 'powerpack' ),
					'csv'           => esc_html__( 'CSV', 'powerpack' ),
					'google-sheets' => esc_html__( 'Google Sheets', 'powerpack' ),
				],
			]
		);

		$this->add_control(
			'csv_source',
			[
				'label'   => esc_html__( 'Source', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'manual',
				'options' => [
					'manual' => esc_html__( 'Manual', 'powerpack' ),
					'file'   => esc_html__( 'CSV File', 'powerpack' ),
				],
				'condition' => [
					'source' => 'csv',
				],
			]
		);

		$this->add_control(
			'csv_file',
			[
				'label'     => esc_html__( 'Upload a CSV File', 'powerpack' ),
				'type'      => Controls_Manager::MEDIA,
				'dynamic'   => [
					'active'     => true,
					'categories' => [
						TagsModule::MEDIA_CATEGORY,
					],
				],
				'condition' => [
					'source'     => 'csv',
					'csv_source' => 'file',
				],
			]
		);

		$this->add_control(
			'csv_data',
			[
				'label'                 => esc_html__( 'CSV Text', 'powerpack' ),
				'type'                  => Controls_Manager::TEXTAREA,
				'default'               => '',
				'condition'             => [
					'source'     => 'csv',
					'csv_source' => 'manual',
				],
			]
		);

		$this->add_control(
			'google_sheet_api_key',
			[
				'label'       => esc_html__( 'Google Sheets API Key', 'powerpack' ),
				'description' => esc_html__( 'Overrides global Google Sheets API Key', 'powerpack' ),
				'label_block' => true,
				'type'        => Controls_Manager::TEXT,
				'default'     => '',
				'condition'   => [
					'source' => 'google-sheets',
				],
			]
		);

		$this->add_control(
			'google_sheet_url',
			[
				'label'       => esc_html__( 'Google Sheets URL', 'powerpack' ),
				'label_block' => true,
				'type'        => Controls_Manager::TEXT,
				'default'     => '',
				'condition'   => [
					'source' => 'google-sheets',
				],
			]
		);

		$this->add_control(
			'cell_range',
			[
				'label'     => esc_html__( 'Table cell range', 'powerpack' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => 'Sheet1',
				'condition' => [
					'source' => 'google-sheets',
				],
			]
		);

		$this->add_control(
			'cache_timeout',
			[
				'label'   => esc_html__( 'Cache Timeout', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'day',
				'options' => [
					'minute'    => esc_html__( '1 min', 'powerpack' ),
					'half_hour' => esc_html__( '30 minutes', 'powerpack' ),
					'hour'      => esc_html__( '1 hour', 'powerpack' ),
					'day'       => esc_html__( '1 day', 'powerpack' ),
					'week'      => esc_html__( '1 week', 'powerpack' ),
					'month'     => esc_html__( '1 month', 'powerpack' ),
					'year'      => esc_html__( '1 year', 'powerpack' ),
				],
				'condition' => [
					'source' => 'google-sheets',
				],
			]
		);

		$repeater_colors = new Repeater();

		$repeater_colors->start_controls_tabs( 'tabs_chart_style' );

		$repeater_colors->add_control(
			'dataset_label',
			[
				'label'   => esc_html__( 'Label', 'powerpack' ),
				'type'    => Controls_Manager::TEXT,
				'default' => esc_html__( 'Label', 'powerpack' ),
				'dynamic' => [ 'active' => true ],
			]
		);

		$repeater_colors->add_control(
			'bg_color',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => 'rgb(0 0 0 / 50%)',
			]
		);

		$repeater_colors->add_control(
			'border_color',
			[
				'label'     => esc_html__( 'Border Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => 'rgb(0 0 0 / 50%)',
			]
		);

		$repeater_colors->add_control(
			'fill',
			[
				'label'       => esc_html__( 'Fill', 'powerpack' ),
				'type'        => Controls_Manager::SWITCHER,
				'default'     => '',
				'description' => esc_html__( 'Fill option is supported by Line and Radar charts only', 'powerpack' ),
				'separator'   => 'before',
			]
		);

		$repeater_colors->add_control(
			'border_dash',
			[
				'label'       => esc_html__( 'Border Dash', 'powerpack' ),
				'type'        => Controls_Manager::SWITCHER,
				'description' => esc_html__( 'Border Dash option is supported by Line and Radar charts only', 'powerpack' ),
			]
		);

		$repeater_colors->add_control(
			'multiple_bg_colors',
			[
				'label'       => esc_html__( 'Background Colors', 'powerpack' ),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => '#EC6E8599, #569FE599, #F7CF6B99, #F0964099',
				'description' => esc_html__( 'Add colors separated by comma. Background colors option is supported by Pie, Doughnut and Polar Area charts only.', 'powerpack' ),
				'dynamic'     => [ 'active' => true ],
				'separator'   => 'before',
			]
		);

		$repeater_colors->add_control(
			'multiple_border_colors',
			[
				'label'       => esc_html__( 'Border Colors', 'powerpack' ),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => '#EC6E85, #569FE5, #F7CF6B, #F09640',
				'description' => esc_html__( 'Add colors separated by comma. Border colors option is supported by Pie, Doughnut and Polar Area charts only.', 'powerpack' ),
				'dynamic'     => [ 'active' => true ],
			]
		);

		$repeater_colors->end_controls_tabs();

		$this->add_control(
			'dataset_colors',
			[
				'label'       => esc_html__( 'Dataset Colors', 'powerpack' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater_colors->get_controls(),
				'default'     => [
					[
						'dataset_label'   => esc_html__( 'Data 1', 'powerpack' ),
						'bg_color'     => '#EC6E8599',
						'border_color' => '#EC6E85',
					],
				],
				'title_field' => '{{{ dataset_label }}}',
				'condition'   => [
					'chart_type!' => 'bubble',
					'source!'     => 'custom',
				],
			]
		);

		// Line, Bar and Radar Area Chart Data
		$repeater = new Repeater();

		$repeater->start_controls_tabs( 'tabs_chart' );

		$repeater->start_controls_tab(
			'tabs_chart_content',
			[
				'label' => esc_html__( 'Content', 'powerpack' ),
			]
		);

		$repeater->add_control(
			'dataset_label',
			[
				'label'   => esc_html__( 'Label', 'powerpack' ),
				'type'    => Controls_Manager::TEXT,
				'default' => esc_html__( 'Label', 'powerpack' ),
				'dynamic' => [ 'active' => true ],
			]
		);

		$repeater->add_control(
			'dataset_data',
			[
				'label'       => esc_html__( 'Data', 'powerpack' ),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => '40, 60, 10, 80',
				'description' => esc_html__( 'Add data values separated by comma', 'powerpack' ),
				'dynamic'     => [ 'active' => true ],
			]
		);

		$repeater->end_controls_tab();

		$repeater->start_controls_tab(
			'tabs_chart_style',
			[
				'label' => esc_html__( 'Style', 'powerpack' ),
			]
		);

		$repeater->add_control(
			'bg_color',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => 'rgb(0 0 0 / 50%)',
			]
		);

		$repeater->add_control(
			'border_color',
			[
				'label'     => esc_html__( 'Border Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => 'rgb(0 0 0 / 50%)',
			]
		);

		$repeater->add_control(
			'fill',
			[
				'label'       => esc_html__( 'Fill', 'powerpack' ),
				'type'        => Controls_Manager::SWITCHER,
				'default'     => '',
				'description' => esc_html__( 'Fill option is supported by Line and Radar charts only', 'powerpack' ),
				'separator'   => 'before',
			]
		);

		$repeater->add_control(
			'border_dash',
			[
				'label'       => esc_html__( 'Border Dash', 'powerpack' ),
				'type'        => Controls_Manager::SWITCHER,
				'description' => esc_html__( 'Border Dash option is supported by Line and Radar charts only', 'powerpack' ),
			]
		);

		$repeater->add_control(
			'multiple_bg_colors',
			[
				'label'       => esc_html__( 'Background Colors', 'powerpack' ),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => '#EC6E8599, #569FE599, #F7CF6B99, #F0964099',
				'description' => esc_html__( 'Add colors separated by comma. Background colors option is supported by Pie, Doughnut and Polar Area charts only.', 'powerpack' ),
				'dynamic'     => [ 'active' => true ],
				'separator'   => 'before',
			]
		);

		$repeater->add_control(
			'multiple_border_colors',
			[
				'label'       => esc_html__( 'Border Colors', 'powerpack' ),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => '#EC6E85, #569FE5, #F7CF6B, #F09640',
				'description' => esc_html__( 'Add colors separated by comma. Border colors option is supported by Pie, Doughnut and Polar Area charts only.', 'powerpack' ),
				'dynamic'     => [ 'active' => true ],
			]
		);

		$repeater->end_controls_tab();

		$repeater->end_controls_tabs();

		$this->add_control(
			'chart_dataset',
			[
				'label'       => esc_html__( 'Chart Data', 'powerpack' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => [
					[
						'dataset_label'   => esc_html__( 'Data 1', 'powerpack' ),
						'dataset_data'    => '40, 60, 10, 80',
						'bg_color'     => '#EC6E8599',
						'border_color' => '#EC6E85',
					],
					[
						'dataset_label'   => esc_html__( 'Data 2', 'powerpack' ),
						'dataset_data'    => '5, 35, 55, 90',
						'bg_color'     => '#569FE599',
						'border_color' => '#569FE5',
					],
					[
						'dataset_label'   => esc_html__( 'Data 3', 'powerpack' ),
						'dataset_data'    => '30, 25, 40, 5',
						'bg_color'     => '#F7CF6B99',
						'border_color' => '#F7CF6B',
					],
				],
				'title_field' => '{{{ dataset_label }}}',
				'condition'   => [
					'chart_type!' => 'bubble',
					'source'      => 'custom',
				],
			]
		);

		// Bubble Chart Dataset
		$repeater_bubble = new Repeater();

		$repeater_bubble->start_controls_tabs( 'tabs_bubble_chart' );

		$repeater_bubble->start_controls_tab(
			'tabs_bubble_chart_content',
			[
				'label' => esc_html__( 'Content', 'powerpack' ),
			]
		);

		$repeater_bubble->add_control(
			'dataset_label',
			[
				'label'       => esc_html__( 'Label', 'powerpack' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Label', 'powerpack' ),
				'placeholder' => esc_html__( 'Enter label', 'powerpack' ),
				'dynamic'     => [ 'active' => true ],
			]
		);

		$repeater_bubble->add_control(
			'bubble_data',
			[
				'label'        => esc_html__( 'Data', 'powerpack' ),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => '[5|15|15][10|18|12][7|14|14]',
				'description' => esc_html__( 'Add data values separated by comma', 'powerpack' ),
				'dynamic'     => [ 'active' => true ],
			]
		);

		$repeater_bubble->end_controls_tab();

		$repeater_bubble->start_controls_tab(
			'tabs_bubble_chart_style',
			[
				'label' => esc_html__( 'Style', 'powerpack' ),
			]
		);

		$repeater_bubble->add_control(
			'bg_color',
			[
				'label'   => esc_html__( 'Background Color', 'powerpack' ),
				'type'    => Controls_Manager::COLOR,
				'default' => 'rgb(0 0 0 / 50%)',
			]
		);

		$repeater_bubble->add_control(
			'border_color',
			[
				'label'   => esc_html__( 'Border Color', 'powerpack' ),
				'type'    => Controls_Manager::COLOR,
				'default' => 'rgb(0 0 0 / 50%)',
			]
		);

		$this->add_control(
			'bubble_chart_dataset',
			[
				'label'       => esc_html__( 'Chart Data', 'powerpack' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater_bubble->get_controls(),
				'default'     => [
					[
						'dataset_label'   => esc_html__( 'Data 1', 'powerpack' ),
						'bubble_data'  => "[ 1, 10, 12 ]\n[ 3, 50, 10 ]\n[ 6, 18, 13 ]\n[ 7, 15, 12 ]",
						'bg_color'     => '#FF638499',
						'border_color' => '#FF6384',
					],
					[
						'dataset_label'   => esc_html__( 'Data 2', 'powerpack' ),
						'bubble_data'  => "[ 3, 28, 7 ]\n[ 5, 13, 11 ]\n[ 8, 36, 11 ]\n[ 9, 15, 6 ]",
						'bg_color'     => '#71C0C199',
						'border_color' => '#71C0C1',
					],
					[
						'dataset_label'   => esc_html__( 'Data 3', 'powerpack' ),
						'bubble_data'  => "[ 3, 18, 14 ]\n[ 8, 5, 17 ]\n[ 10, 10, 10 ]\n[ 18, 15, 15 ]",
						'bg_color'     => '#F5CB6099',
						'border_color' => '#F5CB60',
					],
				],
				'title_field' => '{{{ dataset_label }}}',
				'condition'   => [
					'chart_type' => 'bubble',
				],
			]
		);

		$this->end_controls_section();
	}

	protected function register_content_legend_controls() {
		$this->start_controls_section(
			'section_legend',
			[
				'label' => esc_html__( 'Legend', 'powerpack' ),
			]
		);

		$this->add_control(
			'show_legend',
			[
				'label'     => esc_html__( 'Show Legend', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'default'   => 'yes',
			]
		);

		$this->add_control(
			'legend_reverse',
			[
				'label'     => esc_html__( 'Reverse', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'condition' => [
					'show_legend' => 'yes',
				],
			]
		);

		$this->add_control(
			'legend_position',
			[
				'label'   => esc_html__( 'Position', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'top',
				'options' => [
					'left'   => esc_html__( 'Left', 'powerpack' ),
					'top'    => esc_html__( 'Top', 'powerpack' ),
					'bottom' => esc_html__( 'Bottom', 'powerpack' ),
					'right'  => esc_html__( 'Right', 'powerpack' ),
				],
				'condition' => [
					'show_legend' => 'yes',
				],
			]
		);

		$this->add_control(
			'legend_align',
			[
				'label'   => esc_html__( 'Alignment', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'center',
				'options' => [
					'start'  => esc_html__( 'Start', 'powerpack' ),
					'center' => esc_html__( 'Center', 'powerpack' ),
					'end'    => esc_html__( 'End', 'powerpack' ),
				],
				'condition' => [
					'show_legend' => 'yes',
				],
			]
		);

		$this->end_controls_section();
	}

	protected function register_content_tooltip_controls() {
		$this->start_controls_section(
			'section_chart_tooltip',
			[
				'label' => esc_html__( 'Tooltip', 'powerpack' ),
			]
		);

		$this->add_control(
			'show_tooltip',
			[
				'label'     => esc_html__( 'Show Tooltip', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'default'   => 'yes',
			]
		);

		$this->add_control(
			'tooltip_event',
			[
				'label'     => esc_html__( 'Tooltip Event', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'hover',
				'options'   => [
					'hover' => esc_html__( 'Hover', 'powerpack' ),
					'click' => esc_html__( 'Click', 'powerpack' ),
				],
				'condition' => [
					'show_tooltip' => 'yes',
				],
			]
		);

		$this->add_control(
			'interaction_mode',
			[
				'label'     => esc_html__( 'Tooltip Mode', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'point',
				'options'   => [
					'index'   => esc_html__( 'Index', 'powerpack' ),
					'point'   => esc_html__( 'Point', 'powerpack' ),
					'dataset' => esc_html__( 'Dataset', 'powerpack' ),
				],
				'condition' => [
					'show_tooltip' => 'yes',
				],
			]
		);

		$this->end_controls_section();
	}

	protected function register_content_chart_title_controls() {
		$this->start_controls_section(
			'section_chart_title',
			[
				'label' => esc_html__( 'Chart Title', 'powerpack' ),
			]
		);

		$this->add_control(
			'show_chart_title',
			[
				'label'     => esc_html__( 'Show Chart Title', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'default'   => '',
			]
		);

		$this->add_control(
			'chart_title',
			[
				'label'     => esc_html__( 'Chart Title', 'powerpack' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => '',
				'dynamic'   => [
					'active' => true,
				],
				'condition' => [
					'show_chart_title' => 'yes',
				],
			]
		);

		$this->add_control(
			'chart_title_position',
			[
				'label'   => esc_html__( 'Position', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'top',
				'options' => [
					'left'   => esc_html__( 'Left', 'powerpack' ),
					'top'    => esc_html__( 'Top', 'powerpack' ),
					'bottom' => esc_html__( 'Bottom', 'powerpack' ),
					'right'  => esc_html__( 'Right', 'powerpack' ),
				],
				'condition' => [
					'show_chart_title' => 'yes',
				],
			]
		);

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

		$this->end_controls_section();
	}

	protected function register_content_options_controls() {
		$this->start_controls_section(
			'section_chart_additional_options',
			[
				'label' => esc_html__( 'Additional Options', 'powerpack' ),
			]
		);

		$this->add_control(
			'begin_at_zero',
			[
				'label'      => esc_html__( 'Begin at Zero', 'powerpack' ),
				'type'       => Controls_Manager::SWITCHER,
				'default'    => 'yes',
				'conditions' => [
					'relation' => 'and',
					'terms'    => [
						[
							'relation' => 'and',
							'terms'    => [
								[
									'name'     => 'chart_type',
									'operator' => '!==',
									'value'    => 'pie',
								],
								[
									'name'     => 'chart_type',
									'operator' => '!==',
									'value'    => 'doughnut',
								],
							],
						],
						[
							'relation' => 'or',
							'terms'    => [
								[
									'name'     => 'x_axis_show_grid_lines',
									'operator' => '===',
									'value'    => 'yes',
								],
								[
									'name'     => 'y_axis_show_grid_lines',
									'operator' => '===',
									'value'    => 'yes',
								],
							],
						],
					],
				],
			]
		);

		$this->add_control(
			'step_size',
			[
				'type'       => Controls_Manager::NUMBER,
				'label'      => esc_html__( 'Step Size', 'powerpack' ),
				'min'        => 0,
				'step'       => 0.5,
				'conditions' => [
					'relation' => 'and',
					'terms'    => [
						[
							'relation' => 'and',
							'terms'    => [
								[
									'name'     => 'chart_type',
									'operator' => '!==',
									'value'    => 'pie',
								],
								[
									'name'     => 'chart_type',
									'operator' => '!==',
									'value'    => 'doughnut',
								],
							],
						],
						[
							'relation' => 'or',
							'terms'    => [
								[
									'name'     => 'x_axis_show_grid_lines',
									'operator' => '===',
									'value'    => 'yes',
								],
								[
									'name'     => 'y_axis_show_grid_lines',
									'operator' => '===',
									'value'    => 'yes',
								],
							],
						],
					],
				],
			]
		);

		$this->add_control(
			'maintain_aspect_ratio',
			[
				'label'     => esc_html__( 'Maintain Aspect Ratio', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'default'   => '',
			]
		);

		$this->add_responsive_control(
			'chart_height',
			[
				'type'       => Controls_Manager::SLIDER,
				'label'      => esc_html__( 'Chart Height', 'powerpack' ),
				'range'      => [
					'px' => [
						'min' => 200,
						'max' => 1200,
					],
					'%' => [
						'min' => 10,
						'max' => 100,
					],
					'vh' => [
						'min' => 10,
						'max' => 100,
					],
				],
				'default'    => [
					'size' => 350,
				],
				'size_units' => [ 'px', '%', 'vh' ],
				'selectors'  => [
					'{{WRAPPER}} .pp-chart-wrapper' => 'height: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'maintain_aspect_ratio!' => 'yes',
				],
			]
		);

		$this->add_control(
			'x_axis_heading',
			[
				'label'     => esc_html__( 'X Axis', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
				],
			]
		);

		$this->add_control(
			'x_axis_show_grid_lines',
			[
				'label'     => esc_html__( 'Show Grid Lines', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'default'   => 'yes',
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
				],
			]
		);

		$this->add_control(
			'x_axis_show_labels',
			[
				'label'     => esc_html__( 'Show Labels', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'default'   => 'yes',
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
				],
			]
		);

		$this->add_control(
			'x_axis_show_title',
			[
				'label'     => esc_html__( 'Show Title', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'default'   => '',
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
				],
			]
		);

		$this->add_control(
			'x_axis_title',
			[
				'label'     => esc_html__( 'Title', 'powerpack' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => '',
				'dynamic'   => [
					'active' => true,
				],
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					'x_axis_show_title' => 'yes',
				],
			]
		);

		$this->add_control(
			'y_axis_heading',
			[
				'label'     => esc_html__( 'Y Axis', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
				],
			]
		);

		$this->add_control(
			'y_axis_show_grid_lines',
			[
				'label'     => esc_html__( 'Show Grid Lines', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'default'   => 'yes',
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
				],
			]
		);

		$this->add_control(
			'y_axis_show_labels',
			[
				'label'     => esc_html__( 'Show Labels', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'default'   => 'yes',
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
				],
			]
		);

		$this->add_control(
			'y_axis_labels_prefix',
			[
				'label'              => esc_html__( 'Labels Prefix', 'powerpack' ),
				'type'               => Controls_Manager::TEXT,
				'default'            => '',
				'dynamic'            => [
					'active' => true,
				],
				'frontend_available' => true,
				'condition'          => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					'y_axis_show_labels' => 'yes',
				],
			]
		);

		$this->add_control(
			'y_axis_labels_suffix',
			[
				'label'              => esc_html__( 'Labels Suffix', 'powerpack' ),
				'type'               => Controls_Manager::TEXT,
				'default'            => '',
				'dynamic'            => [
					'active' => true,
				],
				'frontend_available' => true,
				'condition'          => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					'y_axis_show_labels' => 'yes',
				],
			]
		);

		$this->add_control(
			'y_axis_show_title',
			[
				'label'     => esc_html__( 'Show Title', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'default'   => '',
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
				],
			]
		);

		$this->add_control(
			'y_axis_title',
			[
				'label'     => esc_html__( 'Title', 'powerpack' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => '',
				'dynamic'   => [
					'active' => true,
				],
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					'y_axis_show_title' => 'yes',
				],
			]
		);

		$this->add_control(
			'y_axis_min',
			[
				'type'        => Controls_Manager::NUMBER,
				'label'       => esc_html__( 'Minimum Value', 'powerpack' ),
				'description' => esc_html__( 'Set minimum value for Y-axis. This value is ignored when data has a smaller value.', 'powerpack' ),
				'condition'   => [
					'chart_type!' => [ 'pie', 'doughnut' ],
				],
			]
		);

		$this->add_control(
			'y_axis_max',
			[
				'type'        => Controls_Manager::NUMBER,
				'label'       => esc_html__( 'Maximum Value', 'powerpack' ),
				'description' => esc_html__( 'Set maximum value for Y-axis. This value is ignored when data has a larger value.', 'powerpack' ),
				'condition'   => [
					'chart_type!' => [ 'pie', 'doughnut' ],
				],
			]
		);

		$this->add_control(
			'line_chart_heading',
			[
				'label'     => esc_html__( 'Line Chart', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'chart_type' => 'line',
				],
			]
		);

		$this->add_control(
			'tension',
			[
				'type'      => Controls_Manager::NUMBER,
				'label'     => esc_html__( 'Line Tension', 'powerpack' ),
				'min'       => 0,
				'max'       => 10,
				'step'      => 0.1,
				'condition' => [
					'chart_type' => 'line',
				],
			]
		);

		$this->add_control(
			'stacked_heading',
			[
				'label'     => esc_html__( 'Bar Chart', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'chart_type' => 'bar',
				],
			]
		);

		$this->add_control(
			'stacked',
			[
				'label'     => esc_html__( 'Stacked', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'default'   => '',
				'condition' => [
					'chart_type' => 'bar',
				],
			]
		);

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

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

		$this->add_control(
			'chart_animation_duration',
			[
				'type'    => Controls_Manager::SLIDER,
				'label'   => esc_html__( 'Duration', 'powerpack' ),
				'range'   => [
					'px' => [
						'min' => 1,
						'max' => 10000,
						'step' => 100,
					],
				],
				'default' => [
					'size' => 1000,
				],
			]
		);

		$this->add_control(
			'chart_animation_loop',
			[
				'label'     => esc_html__( 'Loop Animation', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'default'   => '',
			]
		);

		$this->end_controls_section();

	}

	protected function register_style_chart_controls() {
		$this->start_controls_section(
			'section_chart_style',
			[
				'label' => esc_html__( 'Chart', 'powerpack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'line_border_width',
			[
				'label'     => esc_html__( 'Line Border Width', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 10,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 3,
				],
				'condition' => [
					'chart_type' => 'line',
				],
			]
		);

		$this->add_control(
			'radar_border_width',
			[
				'label'     => esc_html__( 'Line Border Width', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 10,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 3,
				],
				'condition' => [
					'chart_type' => 'radar',
				],
			]
		);

		$this->add_control(
			'bar_border_width',
			[
				'label'     => esc_html__( 'Bar Border Width', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 10,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 1,
				],
				'condition' => [
					'chart_type' => 'bar',
				],
			]
		);

		$this->add_control(
			'bar_border_radius',
			[
				'label'     => esc_html__( 'Bar Border Radius', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 100,
						'step' => 1,
					],
				],
				'condition' => [
					'chart_type' => 'bar',
				],
			]
		);

		$this->add_control(
			'pie_border_width',
			[
				'label'     => esc_html__( 'Arc Border Width', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 10,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 1,
				],
				'condition' => [
					'chart_type' => [ 'pie', 'doughnut', 'polarArea' ],
				],
			]
		);

		$this->add_control(
			'bubble_border_width',
			[
				'label'     => esc_html__( 'Bubble Border Width', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 10,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 1,
				],
				'condition' => [
					'chart_type' => 'bubble',
				],
			]
		);

		$this->add_control(
			'maxbarthickness',
			[
				'label'     => esc_html__( 'Bar Size', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
						'step' => 1,
					],
				],
				'condition' => [
					'chart_type' => 'bar',
				],
			]
		);

		$this->add_control(
			'barthickness',
			[
				'label'     => esc_html__( 'Bar Space', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
						'step' => 1,
					],
				],
				'condition' => [
					'chart_type' => 'bar',
				],
			]
		);

		$this->end_controls_section();
	}

	protected function register_style_chart_title_controls() {
		$this->start_controls_section(
			'section_chart_title_style',
			[
				'label'     => __( 'Chart Title', 'powerpack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'show_chart_title' => 'yes',
				],
			]
		);

		$this->add_control(
			'chart_title_color',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'condition' => [
					'show_chart_title' => 'yes',
				],
			]
		);

		$this->add_control(
			'chart_title_typography',
			[
				'label'        => esc_html__( 'Typography', 'powerpack' ),
				'type'         => Controls_Manager::POPOVER_TOGGLE,
				'return_value' => 'yes',
				'condition'    => [
					'show_chart_title' => 'yes',
				],
			]
		);

		$this->start_popover();

		$this->add_control(
			'chart_title_size',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => esc_html__( 'Size', 'powerpack' ),
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 12,
				],
				'condition' => [
					'show_chart_title' => 'yes',
				],
			]
		);

		$this->add_control(
			'chart_title_font_weight',
			[
				'label'     => esc_html__( 'Weight', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'options'   => [
					'100'    => esc_html__( '100', 'powerpack' ),
					'200'    => esc_html__( '200', 'powerpack' ),
					'300'    => esc_html__( '300', 'powerpack' ),
					'400'    => esc_html__( '400', 'powerpack' ),
					'500'    => esc_html__( '500', 'powerpack' ),
					'600'    => esc_html__( '600', 'powerpack' ),
					'700'    => esc_html__( '700', 'powerpack' ),
					'800'    => esc_html__( '800', 'powerpack' ),
					'900'    => esc_html__( '900', 'powerpack' ),
					''       => esc_html__( 'Default', 'powerpack' ),
					'normal' => esc_html__( 'Normal', 'powerpack' ),
					'bold'   => esc_html__( 'Bold', 'powerpack' ),
				],
				'condition' => [
					'show_chart_title' => 'yes',
				],
			]
		);

		$this->add_control(
			'chart_title_font_style',
			[
				'label'     => esc_html__( 'Style', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => '',
				'options'   => [
					''        => esc_html__( 'Default', 'powerpack' ),
					'normal'  => esc_html__( 'Normal', 'powerpack' ),
					'italic'  => esc_html__( 'Italic', 'powerpack' ),
					'oblique' => esc_html__( 'Oblique', 'powerpack' ),
				],
				'condition' => [
					'show_chart_title' => 'yes',
				],
			]
		);

		$this->add_control(
			'chart_title_line_height',
			[
				'type'       => Controls_Manager::SLIDER,
				'label'      => esc_html__( 'Line Height', 'powerpack' ),
				'range'      => [
					'px' => [
						'min' => 1,
						'max' => 100,
						'step' => 1,
					],
					'em' => [
						'min' => 0.1,
						'max' => 10,
						'step' => 0.1,
					],
				],
				'size_units' => [ 'px', 'em' ],
				'condition'  => [
					'show_chart_title' => 'yes',
				],
			]
		);

		$this->end_popover();

		$this->end_controls_section();
	}

	protected function register_style_grid_controls() {
		$this->start_controls_section(
			'section_chart_grid_style',
			[
				'label'      => __( 'Grid', 'powerpack' ),
				'tab'        => Controls_Manager::TAB_STYLE,
				'conditions' => [
					'relation' => 'and',
					'terms'    => [
						[
							'relation' => 'and',
							'terms'    => [
								[
									'name'     => 'chart_type',
									'operator' => '!==',
									'value'    => 'pie',
								],
								[
									'name'     => 'chart_type',
									'operator' => '!==',
									'value'    => 'doughnut',
								],
							],
						],
						[
							'relation' => 'or',
							'terms'    => [
								[
									'name'     => 'x_axis_show_grid_lines',
									'operator' => '===',
									'value'    => 'yes',
								],
								[
									'name'     => 'y_axis_show_grid_lines',
									'operator' => '===',
									'value'    => 'yes',
								],
								[
									'name'     => 'x_axis_show_title',
									'operator' => '===',
									'value'    => 'yes',
								],
								[
									'name'     => 'y_axis_show_title',
									'operator' => '===',
									'value'    => 'yes',
								],
							],
						],
					],
				],
			]
		);

		$this->start_controls_tabs( 'tabs_grid_style' );

		$this->start_controls_tab(
			'tab_grid_x',
			[
				'label'     => esc_html__( 'X Axis', 'powerpack' ),
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
				],
			]
		);

		$this->grid_style_controls( 'x' );

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_grid_y',
			[
				'label'     => esc_html__( 'Y Axis', 'powerpack' ),
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
				],
			]
		);

		$this->grid_style_controls( 'y' );

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

		$this->end_controls_section();
	}

	protected function grid_style_controls( $type ) {
		$this->add_control(
			'grid_color_' . $type,
			[
				'label'     => esc_html__( 'Grid Line Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => 'rgb(0 0 0 / 50%)',
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_grid_lines' => 'yes',
				],
			]
		);

		$this->add_control(
			'grid_width_' . $type,
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => esc_html__( 'Grid Line Width', 'powerpack' ),
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 10,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 1,
				],
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_grid_lines' => 'yes',
				],
			]
		);

		$this->title_style_controls( $type );
	}

	protected function title_style_controls( $type ) {

		$this->add_control(
			$type . '_heading',
			[
				'label'     => esc_html__( 'Title', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_title' => 'yes',
				],
			]
		);

		$this->add_control(
			$type . '_axis_title_color',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_title' => 'yes',
				],
			]
		);

		$this->add_control(
			$type . '_axis_title_typography',
			[
				'label'        => esc_html__( 'Typography', 'powerpack' ),
				'type'         => Controls_Manager::POPOVER_TOGGLE,
				'return_value' => 'yes',
				'condition'    => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_title' => 'yes',
				],
			]
		);

		$this->start_popover();

		$this->add_control(
			$type . '_axis_title_size',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => esc_html__( 'Size', 'powerpack' ),
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 12,
				],
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_title' => 'yes',
				],
			]
		);

		$this->add_control(
			$type . '_axis_title_font_weight',
			[
				'label'     => esc_html__( 'Weight', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'options'   => [
					'100'    => esc_html__( '100', 'powerpack' ),
					'200'    => esc_html__( '200', 'powerpack' ),
					'300'    => esc_html__( '300', 'powerpack' ),
					'400'    => esc_html__( '400', 'powerpack' ),
					'500'    => esc_html__( '500', 'powerpack' ),
					'600'    => esc_html__( '600', 'powerpack' ),
					'700'    => esc_html__( '700', 'powerpack' ),
					'800'    => esc_html__( '800', 'powerpack' ),
					'900'    => esc_html__( '900', 'powerpack' ),
					''       => esc_html__( 'Default', 'powerpack' ),
					'normal' => esc_html__( 'Normal', 'powerpack' ),
					'bold'   => esc_html__( 'Bold', 'powerpack' ),
				],
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_title' => 'yes',
				],
			]
		);

		$this->add_control(
			$type . '_axis_title_font_style',
			[
				'label'     => esc_html__( 'Style', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => '',
				'options'   => [
					''        => esc_html__( 'Default', 'powerpack' ),
					'normal'  => esc_html__( 'Normal', 'powerpack' ),
					'italic'  => esc_html__( 'Italic', 'powerpack' ),
					'oblique' => esc_html__( 'Oblique', 'powerpack' ),
				],
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_title' => 'yes',
				],
			]
		);

		$this->add_control(
			$type . '_axis_title_line_height',
			[
				'type'       => Controls_Manager::SLIDER,
				'label'      => esc_html__( 'Line Height', 'powerpack' ),
				'range'      => [
					'px' => [
						'min' => 1,
						'max' => 100,
						'step' => 1,
					],
					'em' => [
						'min' => 0.1,
						'max' => 10,
						'step' => 0.1,
					],
				],
				'size_units' => [ 'px', 'em' ],
				'condition'  => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_title' => 'yes',
				],
			]
		);

		$this->end_popover();
	}

	protected function register_style_labels_controls() {
		$this->start_controls_section(
			'section_chart_labels_style',
			[
				'label'      => __( 'Labels', 'powerpack' ),
				'tab'        => Controls_Manager::TAB_STYLE,
				'conditions' => [
					'relation' => 'and',
					'terms'    => [
						[
							'relation' => 'and',
							'terms'    => [
								[
									'name'     => 'chart_type',
									'operator' => '!==',
									'value'    => 'pie',
								],
								[
									'name'     => 'chart_type',
									'operator' => '!==',
									'value'    => 'doughnut',
								],
							],
						],
						[
							'relation' => 'or',
							'terms'    => [
								[
									'name'     => 'x_axis_show_labels',
									'operator' => '===',
									'value'    => 'yes',
								],
								[
									'name'     => 'y_axis_show_labels',
									'operator' => '===',
									'value'    => 'yes',
								],
							],
						],
					],
				],
			]
		);

		$this->add_control(
			'x_axis_labels_heading',
			[
				'label'     => esc_html__( 'X Axis', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					'x_axis_show_labels' => 'yes',
				],
			]
		);

		$this->labels_style_controls( 'x' );

		$this->add_control(
			'y_axis_labels_heading',
			[
				'label'     => esc_html__( 'Y Axis', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					'y_axis_show_labels' => 'yes',
				],
			]
		);

		$this->labels_style_controls( 'y' );

		$this->end_controls_section();
	}

	protected function labels_style_controls( $type ) {
		$this->add_control(
			$type . '_axis_labels_color',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#666',
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_labels' => 'yes',
				],
			]
		);

		$this->add_control(
			$type . '_axis_labels_typography',
			[
				'label'        => esc_html__( 'Typography', 'powerpack' ),
				'type'         => Controls_Manager::POPOVER_TOGGLE,
				'return_value' => 'yes',
				'condition'    => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_labels' => 'yes',
				],
			]
		);

		$this->start_popover();

		$this->add_control(
			$type . '_axis_labels_size',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => esc_html__( 'Size', 'powerpack' ),
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 12,
				],
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_labels' => 'yes',
				],
			]
		);

		$this->add_control(
			$type . '_axis_labels_font_weight',
			[
				'label'     => esc_html__( 'Weight', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'options'   => [
					'100'    => esc_html__( '100', 'powerpack' ),
					'200'    => esc_html__( '200', 'powerpack' ),
					'300'    => esc_html__( '300', 'powerpack' ),
					'400'    => esc_html__( '400', 'powerpack' ),
					'500'    => esc_html__( '500', 'powerpack' ),
					'600'    => esc_html__( '600', 'powerpack' ),
					'700'    => esc_html__( '700', 'powerpack' ),
					'800'    => esc_html__( '800', 'powerpack' ),
					'900'    => esc_html__( '900', 'powerpack' ),
					''       => esc_html__( 'Default', 'powerpack' ),
					'normal' => esc_html__( 'Normal', 'powerpack' ),
					'bold'   => esc_html__( 'Bold', 'powerpack' ),
				],
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_labels' => 'yes',
				],
			]
		);

		$this->add_control(
			$type . '_axis_labels_font_style',
			[
				'label'     => esc_html__( 'Style', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => '',
				'options'   => [
					''        => esc_html__( 'Default', 'powerpack' ),
					'normal'  => esc_html__( 'Normal', 'powerpack' ),
					'italic'  => esc_html__( 'Italic', 'powerpack' ),
					'oblique' => esc_html__( 'Oblique', 'powerpack' ),
				],
				'condition' => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_labels' => 'yes',
				],
			]
		);

		$this->add_control(
			$type . '_axis_labels_line_height',
			[
				'type'       => Controls_Manager::SLIDER,
				'label'      => esc_html__( 'Line Height', 'powerpack' ),
				'range'      => [
					'px' => [
						'min' => 1,
						'max' => 100,
						'step' => 1,
					],
					'em' => [
						'min' => 0.1,
						'max' => 10,
						'step' => 0.1,
					],
				],
				'size_units' => [ 'px', 'em' ],
				'condition'  => [
					'chart_type!' => [ 'pie', 'doughnut' ],
					$type . '_axis_show_labels' => 'yes',
				],
			]
		);

		$this->end_popover();
	}

	protected function register_style_legend_controls() {
		$this->start_controls_section(
			'section_legend_style',
			[
				'label'     => __( 'Legend', 'powerpack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'show_legend' => 'yes',
				],
			]
		);

		$this->add_control(
			'legend_color',
			[
				'label'     => esc_html__( 'Label Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#666',
				'condition' => [
					'show_legend' => 'yes',
				],
			]
		);

		$this->add_control(
			'legend_typography',
			[
				'label'        => esc_html__( 'Typography', 'powerpack' ),
				'type'         => Controls_Manager::POPOVER_TOGGLE,
				'return_value' => 'yes',
				'condition'    => [
					'show_legend' => 'yes',
				],
			]
		);

		$this->start_popover();

		$this->add_control(
			'legend_size',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => esc_html__( 'Size', 'powerpack' ),
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 12,
				],
				'condition' => [
					'show_legend' => 'yes',
				],
			]
		);

		$this->add_control(
			'legend_font_weight',
			[
				'label'     => esc_html__( 'Weight', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'options'   => [
					'100'    => esc_html__( '100', 'powerpack' ),
					'200'    => esc_html__( '200', 'powerpack' ),
					'300'    => esc_html__( '300', 'powerpack' ),
					'400'    => esc_html__( '400', 'powerpack' ),
					'500'    => esc_html__( '500', 'powerpack' ),
					'600'    => esc_html__( '600', 'powerpack' ),
					'700'    => esc_html__( '700', 'powerpack' ),
					'800'    => esc_html__( '800', 'powerpack' ),
					'900'    => esc_html__( '900', 'powerpack' ),
					''       => esc_html__( 'Default', 'powerpack' ),
					'normal' => esc_html__( 'Normal', 'powerpack' ),
					'bold'   => esc_html__( 'Bold', 'powerpack' ),
				],
				'condition' => [
					'show_legend' => 'yes',
				],
			]
		);

		$this->add_control(
			'legend_font_style',
			[
				'label'     => esc_html__( 'Style', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => '',
				'options'   => [
					''        => esc_html__( 'Default', 'powerpack' ),
					'normal'  => esc_html__( 'Normal', 'powerpack' ),
					'italic'  => esc_html__( 'Italic', 'powerpack' ),
					'oblique' => esc_html__( 'Oblique', 'powerpack' ),
				],
				'condition' => [
					'show_legend' => 'yes',
				],
			]
		);

		$this->add_control(
			'legend_line_height',
			[
				'type'       => Controls_Manager::SLIDER,
				'label'      => esc_html__( 'Line Height', 'powerpack' ),
				'range'      => [
					'px' => [
						'min' => 1,
						'max' => 100,
						'step' => 1,
					],
					'em' => [
						'min' => 0.1,
						'max' => 10,
						'step' => 0.1,
					],
				],
				'size_units' => [ 'px', 'em' ],
				'condition'  => [
					'show_legend' => 'yes',
				],
			]
		);

		$this->end_popover();

		$this->end_controls_section();
	}

	protected function register_style_points_controls() {
		$this->start_controls_section(
			'section_chart_points_style',
			[
				'label'     => __( 'Points', 'powerpack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'chart_type' => [ 'line', 'radar', 'bubble' ],
				],
			]
		);

		$this->add_control(
			'custom_point_styles',
			[
				'label'     => esc_html__( 'Custom Styles', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'powerpack' ),
				'label_off' => esc_html__( 'No', 'powerpack' ),
				'default'   => '',
				'condition' => [
					'chart_type' => [ 'line', 'radar', 'bubble' ],
				],
			]
		);

		$this->add_control(
			'point_style',
			[
				'label'     => esc_html__( 'Point Style', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'circle',
				'options'   => [
					'circle'      => esc_html__( 'Circle', 'powerpack' ),
					'cross'       => esc_html__( 'Cross', 'powerpack' ),
					'crossRot'    => esc_html__( 'CrossRot', 'powerpack' ),
					'dash'        => esc_html__( 'Dash', 'powerpack' ),
					'line'        => esc_html__( 'Line', 'powerpack' ),
					'rect'        => esc_html__( 'Rect', 'powerpack' ),
					'rectRounded' => esc_html__( 'RectRounded', 'powerpack' ),
					'rectRot'     => esc_html__( 'RectRot', 'powerpack' ),
					'star'        => esc_html__( 'Star', 'powerpack' ),
					'triangle'    => esc_html__( 'Triangle', 'powerpack' ),
				],
				'condition' => [
					'chart_type' => [ 'line', 'radar', 'bubble' ],
					'custom_point_styles' => 'yes',
				],
			]
		);

		$this->add_control(
			'point_bg',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#ff5a6e99',
				'condition' => [
					'chart_type' => [ 'line', 'radar' ],
					'custom_point_styles' => 'yes',
					'point_style' => [ 'circle', 'rect', 'rectRounded', 'rectRot', 'triangle' ],
				],
			]
		);

		$this->add_control(
			'point_border_color',
			[
				'label'     => esc_html__( 'Border Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#00000099',
				'condition' => [
					'chart_type' => [ 'line', 'radar', 'bubble' ],
					'custom_point_styles' => 'yes',
				],
			]
		);

		$this->add_control(
			'point_border_width',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => esc_html__( 'Border Width', 'powerpack' ),
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 1,
				],
				'condition' => [
					'chart_type' => [ 'line', 'radar', 'bubble' ],
					'custom_point_styles' => 'yes',
				],
			]
		);

		$this->add_control(
			'point_size',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => esc_html__( 'Point Size', 'powerpack' ),
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 5,
				],
				'condition' => [
					'chart_type' => [ 'line', 'radar' ],
					'custom_point_styles' => 'yes',
				],
			]
		);

		$this->add_control(
			'point_hover_size',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => esc_html__( 'Point Hover Size', 'powerpack' ),
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 10,
				],
				'condition' => [
					'chart_type' => [ 'line', 'radar' ],
					'custom_point_styles' => 'yes',
				],
			]
		);

		$this->end_controls_section();
	}

	protected function register_style_tooltip_controls() {
		$this->start_controls_section(
			'section_chart_tooltip_style',
			[
				'label'     => __( 'Tooltip', 'powerpack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'show_tooltip' => 'yes',
				],
			]
		);

		$this->add_control(
			'tooltip_background_color',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'condition' => [
					'show_tooltip' => 'yes',
				],
			]
		);

		$this->add_control(
			'tooltip_border_color',
			[
				'label'     => esc_html__( 'Border Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'condition' => [
					'show_tooltip' => 'yes',
				],
			]
		);

		$this->add_control(
			'tooltip_border_width',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => esc_html__( 'Border Width', 'powerpack' ),
				'range'     => [
					'px' => [
						'min'  => 1,
						'max'  => 20,
						'step' => 1,
					],
				],
				'condition' => [
					'show_tooltip' => 'yes',
				],
			]
		);

		$this->add_control(
			'tooltip_border_radius',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => esc_html__( 'Border Radius', 'powerpack' ),
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 25,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 6,
				],
				'condition' => [
					'show_tooltip' => 'yes',
				],
			]
		);

		$this->add_control(
			'tooltip_padding',
			[
				'label'     => esc_html__( 'Padding', 'powerpack' ),
				'type'      => Controls_Manager::NUMBER,
				'default'   => 6,
				'condition' => [
					'show_tooltip' => 'yes',
				],
			]
		);

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

		$this->add_control(
			'tooltip_title_color',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#fff',
				'condition' => [
					'show_tooltip' => 'yes',
				],
			]
		);

		$this->add_control(
			'tooltip_title_font_size',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => esc_html__( 'Font Size', 'powerpack' ),
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 12,
				],
				'condition' => [
					'show_tooltip' => 'yes',
				],
			]
		);

		$this->add_control(
			'tooltip_body_heading',
			[
				'label'     => esc_html__( 'Body', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'tooltip_body_color',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#fff',
				'condition' => [
					'show_tooltip' => 'yes',
				],
			]
		);

		$this->add_control(
			'tooltip_body_font_size',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => esc_html__( 'Font Size', 'powerpack' ),
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
						'step' => 1,
					],
				],
				'default'   => [
					'size' => 12,
				],
				'condition' => [
					'show_tooltip' => 'yes',
				],
			]
		);

		$this->end_controls_section();
	}

	public function get_labels() {
		$settings = $this->get_settings_for_display();
		$source = isset( $settings['source'] ) ? $settings['source'] : 'custom';
		$labels   = [];

		if ( 'google-sheets' === $source ) {
			$sheet_data = $this->get_google_sheets_data();

			if ( ! empty( $sheet_data['data'] ) ) {
				foreach ( $sheet_data['data'] as $index => $item ) {
					if ( 0 === $index ) {
						continue;
					}

					$labels[] = $item[0];
				}
			}
		} elseif ( 'csv' === $source ) {
			$csv_data = $this->get_csv_data();
			$labels   = $csv_data['labels'];
		} else {
			$labels = isset( $settings['labels'] ) ? explode( ',', $settings['labels'] ) : '';
		}

		return $labels;
	}

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

		if ( ! empty( $settings['chart_type'] ) && 'bar' === $settings['chart_type'] && 
			! empty( $settings['bar_chart_type'] ) && 'horizontal_bar' === $settings['bar_chart_type'] ) {
			return 'bar';
		}

		return $settings['chart_type'] ?? '';
	}

	public function get_default_color(&$colorIndex) {
		static $defaultColors = ['#FF6384', '#36A2EB', '#FFCD56', '#F09640'];

		$color = $defaultColors[$colorIndex % count($defaultColors)];
		$colorIndex++;

		return $color;
	}

	protected function get_datasets( $settings, $chart_type ) {
		$source     = isset( $settings['source'] ) ? $settings['source'] : 'custom';
		$datasets   = [];
		$colorIndex = 0;

		switch ( $source ) {
			case 'csv':
				$sheet_data = $this->get_csv_data();
				break;
			case 'google-sheets':
				$sheet_data = $this->get_google_sheets_data();
				break;
		}

		if ( 'custom' !== $source ) {
			if ( isset( $sheet_data['data'] ) && ! empty( $sheet_data['data'] ) ) {
				$header_row = $sheet_data['data'][0]; // This assumes the first row contains headers
				$dynamic_settings = $settings['dataset_colors'] ?? [];

				// Iterate over each column starting from the second column
				for ( $col = 1; $col < count( $header_row ); $col++ ) {
					$chart_data = [];

					foreach ( $sheet_data['data'] as $index => $row ) {
						if ( 0 === $index ) { // Skip header row.
							continue;
						}

						$chart_data[] = $row[ $col ];
					}

					$dataset = [
						'dataset_label' => $header_row[ $col ],
						'dataset_data'  => implode( ',', $chart_data ),
					];

					// Get dynamic colors if available
					if ( array_key_exists( $col - 1, $dynamic_settings ) ) {
						$default_color = $this->get_default_color( $colorIndex );

						$bg_color = ! empty( $dynamic_settings[$col - 1]['bg_color'] ) ? $dynamic_settings[$col - 1]['bg_color'] : $default_color;
						$border_color = ! empty( $dynamic_settings[$col - 1]['border_color'] ) ? $dynamic_settings[$col - 1]['border_color'] : $default_color;

						$dataset['backgroundColor'] = $bg_color;
						$dataset['borderColor'] = $border_color;

						if ( in_array( $chart_type, ['pie', 'doughnut', 'polarArea'], true ) ) {
							$bg_colors = isset( $dynamic_settings[$col - 1]['multiple_bg_colors'] ) ? $dynamic_settings[$col - 1]['multiple_bg_colors'] : [];
							$border_colors = isset( $dynamic_settings[$col - 1]['multiple_border_colors'] ) ? $dynamic_settings[$col - 1]['multiple_border_colors'] : [];

							$dataset['multiple_bg_colors'] = $bg_colors;
							$dataset['multiple_border_colors'] = $border_colors;
						}

						$dataset['border_dash'] = ! empty( $dynamic_settings[$col - 1]['border_dash'] ) ? $dynamic_settings[$col - 1]['border_dash'] : [];
						$dataset['fill']        = ! empty( $dynamic_settings[$col - 1]['fill'] ) ? $dynamic_settings[$col - 1]['fill'] : [];
					} else {
						$default_color = $this->get_default_color( $colorIndex );

						$dataset['backgroundColor'] = $default_color;
						$dataset['borderColor'] = $default_color;

						if ( in_array( $chart_type, ['pie', 'doughnut', 'polarArea'], true ) ) {
							$dataset['multiple_bg_colors'] = [];
							$dataset['multiple_border_colors'] = [];
						}

						$dataset['border_dash'] = [];
						$dataset['fill']        = [];
					}

					$chart_datasets[] = $dataset;
				}

				foreach ( $chart_datasets as $item ) {
					$datasets[] = $this->get_chart_dataset( $settings, $chart_type, $item );
				}
			}
		} else {
			$chart_datasets = ( 'bubble' === $chart_type ) ? $settings['bubble_chart_dataset'] : $settings['chart_dataset'];

			foreach ( $chart_datasets as $item ) {
				$datasets[] = $this->get_chart_dataset( $settings, $chart_type, $item );
			}
		}

		return $datasets;
	}

	/**
	 * Fetch CSV data from from csv file.
	 *
	 * @since 2.13.0
	 * @access protected
	 */
	protected function get_csv_data() {
		$settings  = $this->get_settings_for_display();
		$is_editor = \Elementor\Plugin::instance()->editor->is_edit_mode();

		if ( isset( $settings['source'] ) && 'csv' !== $settings['source'] ) {
			return [
				'labels' => '',
				'data' => '',
			];
		}

		$csv_source = isset( $settings['csv_source'] ) ? $settings['csv_source'] : 'file';
		$csv_url    = ! empty( $settings['csv_file']['url'] ) ? $settings['csv_file']['url'] : '';

		if ( 'file' === $csv_source && '' !== $csv_url ) {
			$response = wp_remote_get(
				$csv_url,
				[
					'sslverify' => false,
				]
			);

			if ( is_wp_error( $response ) || 200 !== $response['response']['code'] || '.csv' !== substr( $csv_url, -4 ) ) {
				if ( $is_editor ) {
					return $this->render_editor_placeholder(
						[
							'title' => esc_html__( 'CSV File Error', 'powerpack' ),
							'body' => esc_html__( '<p>Please provide a valid CSV file.</p>', 'powerpack' ),
						]
					);
				}
				return;
			}

			$body = wp_remote_retrieve_body( $response );
		} else {
			$body = isset( $settings['csv_data'] ) ? $settings['csv_data'] : '';
		}

		$csv_data_array = explode( "\n", $body );

		$csv_data = [];

		if ( is_array( $csv_data_array ) ) {
			foreach ( $csv_data_array as $items ) {
				$csv_data[] = explode( ',', $items );
			}

			foreach ( $csv_data as $item ) {
				$csv_data_labels[] = $item[0];
			}
		}

		array_shift( $csv_data_labels );

		return [
			'labels' => $csv_data_labels,
			'data' => $csv_data,
		];
	}

	/**
	 * Retrieve Google Sheets API from Max Addons settings.
	 *
	 * @since 2.13.0
	 * @return string
	 */
	private function get_google_sheets_api() {
		$settings = $this->get_settings_for_display();

		if ( isset( $settings['google_sheet_api_key'] ) && ! empty( $settings['google_sheet_api_key'] ) ) {
			return $settings['google_sheet_api_key'];
		} else {
			return \PowerpackElements\Classes\PP_Admin_Settings::get_option( 'pp_google_sheets_api_key' );
		}
	}

	/**
	 * Gets expire time of transient.
	 *
	 * @since 2.13.0
	 * @param array $settings The settings array.
	 * @return the transient expire time.
	 * @access public
	 */
	public function get_transient_expire( $settings ) {
		$expire_value = isset( $settings['cache_timeout'] ) ? $settings['cache_timeout'] : 'day';
		$expire_time  = 24 * HOUR_IN_SECONDS;

		if ( 'minute' === $expire_value ) {
			$expire_time = 1 * MINUTE_IN_SECONDS;
		} elseif ( 'half_hour' === $expire_value ) {
			$expire_time = 30 * MINUTE_IN_SECONDS;
		} elseif ( 'hour' === $expire_value ) {
			$expire_time = 60 * MINUTE_IN_SECONDS;
		} elseif ( 'week' === $expire_value ) {
			$expire_time = 7 * DAY_IN_SECONDS;
		} elseif ( 'month' === $expire_value ) {
			$expire_time = 30 * DAY_IN_SECONDS;
		} elseif ( 'year' === $expire_value ) {
			$expire_time = 365 * DAY_IN_SECONDS;
		}

		return $expire_time;
	}

	/**
	 * Extract Google Sheets ID from URL.
	 *
	 * @param string $url Google Sheets URL.
	 * @return string Google Sheets ID.
	 */
	private function extract_sheet_id( $url ) {
		preg_match( '/\/spreadsheets\/d\/([a-zA-Z0-9-_]+)/', $url, $matches );
		return isset( $matches[1] ) ? $matches[1] : '';
	}

	/**
	 * Fetch data from Google Sheets API.
	 *
	 * @since 2.13.0
	 * @return array|\WP_Error API response or error object.
	 */
	private function get_google_sheets_data() {
		$settings  = $this->get_settings_for_display();
		$is_editor = \Elementor\Plugin::instance()->editor->is_edit_mode();
		$api_key   = $this->get_google_sheets_api();

		if ( empty( $api_key ) ) {
			if ( $is_editor ) {
				return $this->render_editor_placeholder(
					[
						'title' => esc_html__( 'Google Sheets Error', 'powerpack' ),
						'body' => esc_html__( 'To fetch data from Google Sheets, you need to set up an API key.', 'powerpack' ),
					]
				);
			}
			return;
		}

		$sheet_id       = ! empty( $settings['google_sheet_url'] ) ? $this->extract_sheet_id( $settings['google_sheet_url'] ) : '';
		$cell_range     = ! empty( $settings['cell_range'] ) ? $settings['cell_range'] : '';
		$cache_duration = $this->get_transient_expire( $settings );
		$url            = sprintf( 'https://sheets.googleapis.com/v4/spreadsheets/%s/values/%s?key=%s', sanitize_text_field( $sheet_id ), $cell_range, sanitize_text_field( $api_key ) );

		if ( empty( $sheet_id ) ) {
			if ( $is_editor ) {
				return $this->render_editor_placeholder(
					[
						'title' => esc_html__( 'Google Sheets Error', 'powerpack' ),
						'body' => esc_html__( 'Please provide a valid Google Sheets URL.', 'powerpack' ),
					]
				);
			}
			return;
		}

		if ( empty( $cell_range ) ) {
			if ( $is_editor ) {
				return $this->render_editor_placeholder(
					[
						'title' => esc_html__( 'Google Sheets Error', 'powerpack' ),
						'body' => esc_html__( 'Please enter table cell range for provided Google Sheets URL.', 'powerpack' ),
					]
				);
			}
			return;
		}

		// Generate a unique transient key based on the sheet ID
		$transient_key_data = 'pp_google_sheets_data_' . md5( $api_key . $sheet_id . $cache_duration );
		$transient_key_url  = 'pp_google_sheets_url_' . md5( $api_key . $sheet_id . $cache_duration );

		// Check if cached data exists
		$cached_data = get_transient( $transient_key_data );
		$cached_url  = get_transient( $transient_key_url );

		if ( false !== $cached_data && $url === $cached_url ) {
			return [
				'data'  => $cached_data,
				'error' => false,
			];
		}

		$response = wp_remote_get( esc_url_raw( $url ) );

		if ( is_wp_error( $response ) ) {
			if ( $is_editor ) {
				return $this->render_editor_placeholder(
					[
						'title' => esc_html__( 'Google Sheets Error', 'powerpack' ),
						'body' => $response,
					]
				);
			}
			return;
		}

		if ( 200 !== wp_remote_retrieve_response_code( $response ) ) {
			if ( $is_editor ) {
				return $this->render_editor_placeholder(
					[
						'title' => esc_html__( 'Google Sheets Error', 'powerpack' ),
						'body' => esc_html__( 'Failed to fetch data from Google Sheets.', 'powerpack' ),
					]
				);
			}
			return;
		}

		$body = wp_remote_retrieve_body( $response );

		if ( empty( $body ) ) {
			if ( $is_editor ) {
				return $this->render_editor_placeholder(
					[
						'title' => esc_html__( 'Google Sheets Error', 'powerpack' ),
						'body' => esc_html__( 'The provided Google Sheet is empty.', 'powerpack' ),
					]
				);
			}
			return;
		}

		$data = json_decode( $body, true );

		$response_data = [
			'data'  => isset( $data['values'] ) ? $data['values'] : [],
			'error' => false,
		];

		// Cache the data in a transient
		set_transient( $transient_key_data, $response_data['data'], intval( $cache_duration ) );
		set_transient( $transient_key_url, $url, intval( $cache_duration ) );

		return $response_data;
	}

	protected function get_chart_dataset( $settings, $chart_type, $item ) {
		$dataset = [
			'label'           => $item['dataset_label'],
			'data'            => ( 'bubble' === $chart_type )
				? $this->bubble_chart_data_array( $item['bubble_data'] )
				: array_map( 'floatval', explode( ',', $item['dataset_data'] ) ),
			'backgroundColor' => $this->get_background_color( $item, $chart_type ),
			'borderColor'     => $this->get_border_color( $item, $chart_type ),
			'borderDash'      => ( 'line' === $chart_type && ! empty( $item['border_dash'] ) && 'yes' === $item['border_dash'] ) ? [5, 5] : [],
			'fill'            => ! empty( $item['fill'] ) && 'yes' === $item['fill'],
			'borderWidth'     => $this->get_border_width(),
		];

		if ( in_array( $chart_type, ['line', 'radar', 'bubble'], true ) ) {
			$dataset = array_merge( $dataset, $this->get_point_styles( $settings, $chart_type ) );
		}

		if ( 'line' === $chart_type && 'yes' === $settings['stepped_line'] ) {
			$dataset['stepped'] = true;
		}

		if ( 'line' === $chart_type && '' !== $settings['tension'] ) {
			$dataset['tension'] = $settings['tension'];
		}

		if ( 'bar' === $chart_type ) {
			if ( ! empty( $settings['bar_border_radius']['size'] ) ) {
				$dataset['borderRadius']  = $settings['bar_border_radius']['size'];
				$dataset['borderSkipped'] = false;
			}

			if ( ! empty( $settings['barthickness']['size'] ) ) {
				$dataset['barThickness'] = $settings['barthickness']['size'];
			}

			if ( ! empty( $settings['maxbarthickness']['size'] ) ) {
				$dataset['maxBarThickness'] = $settings['maxbarthickness']['size'];
			}
		}

		return $dataset;
	}

	protected function get_border_width() {
		$settings   = $this->get_settings_for_display();
		$chart_type = $this->get_chart_type();

		switch ( $chart_type ) {
			case 'bar':
				$data_border_width = $settings['bar_border_width']['size'];
				break;

			case 'line':
				$data_border_width = $settings['line_border_width']['size'];
				break;

			case 'radar':
				$data_border_width = $settings['radar_border_width']['size'];
				break;

			case 'bubble':
				$data_border_width = $settings['bubble_border_width']['size'];
				break;

			case 'pie':
			case 'doughnut':
			case 'polarArea':
				$data_border_width = $settings['pie_border_width']['size'];
				break;
			
			default:
				$data_border_width = 0;
				break;
		}

		$border_width = ( '' !== $data_border_width ) ? $data_border_width : $this->get_default_border_width();

		return $border_width;
	}

	protected function get_default_border_width() {
		$chart_type = $this->get_chart_type();

		switch ( $chart_type ) {
			case 'bar':
				$border_width = 0;
				break;

			case 'line':
			case 'radar':
			case 'bubble':
				$border_width = 3;
				break;

			case 'pie':
			case 'doughnut':
			case 'polarArea':
				$border_width = 2;
				break;
			
			default:
				$border_width = 1;
				break;
		}

		return $border_width;
	}

	protected function get_background_color( $item, $chart_type ) {
		if ( in_array( $chart_type, ['pie', 'doughnut', 'polarArea'], true ) && ! empty( $item['multiple_bg_colors'] ) ) {
			return explode( ',', $item['multiple_bg_colors'] );
		} else {
			return isset( $item['backgroundColor'] ) ? ( is_array( $item['backgroundColor'] ) ? $item['backgroundColor'] : $item['backgroundColor'] ) : '';
		}

		return $item['bg_color'];
	}

	protected function get_border_color( $item, $chart_type ) {
		if ( in_array( $chart_type, ['pie', 'doughnut', 'polarArea'], true ) && ! empty( $item['multiple_border_colors'] ) ) {
			return explode( ',', $item['multiple_border_colors'] );
		} else {
			return isset( $item['borderColor'] ) ? ( is_array( $item['borderColor'] ) ? $item['borderColor'] : $item['borderColor'] ) : '';
		}

		return $item['border_color'];
	}

	protected function get_point_styles( $settings, $chart_type ) {
		$styles = [];

		if ( 'yes' === $settings['custom_point_styles'] ) {
			$styles['pointStyle'] = $settings['point_style'] ?? '';

			if ( 'bubble' !== $chart_type ) {
				if ( $settings['point_bg'] ) {
					$styles['pointBackgroundColor'] = $settings['point_bg'];
				}

				$styles['pointRadius'] = $settings['point_size']['size'] ?? null;
				$styles['pointHoverRadius'] = $settings['point_hover_size']['size'] ?? null;
			}

			if ( $settings['point_border_width']['size'] ) {
				$styles['pointBorderWidth'] = $settings['point_border_width']['size'];
			}

			if ( $settings['point_border_color'] ) {
				$styles['pointBorderColor'] = $settings['point_border_color'];
			}
		}

		return $styles;
	}

	protected function get_chart_options( $settings, $chart_type ) {
		$options = [];

		if ( 'bar' === $chart_type && 'horizontal_bar' === $settings['bar_chart_type'] ) {
			$options['indexAxis'] = 'y';
		}

		if ( 'pie' === $chart_type ) {
			$options['cutout'] = 0;
		} elseif ( 'doughnut' === $chart_type ) {
			$options['cutout'] = 50;
		} else {
			$options['scales'] = $this->get_grid_options( $settings );
		}

		$options = $this->get_additional_options( $settings, $options );

		return $options;
	}

	protected function get_grid_options( $settings ) {
		$x_axis_title = $this->get_axis_title( $settings, 'x' );
		$y_axis_title = $this->get_axis_title( $settings, 'y' );

		return [
			'x' => array_merge( $this->get_axis_settings( $settings, 'x' ), [
				'title' => $x_axis_title,
				'grid'  => $this->get_grid_settings( $settings, 'x' ),
			] ),
			'y' => array_merge( $this->get_axis_settings( $settings, 'y' ), [
				'title'        => $y_axis_title,
				'suggestedMin' => ( '' !== $settings['y_axis_min'] ) ? $settings['y_axis_min'] : '',
				'suggestedMax' => ( '' !== $settings['y_axis_max'] ) ? $settings['y_axis_max'] : '',
				'grid'         => $this->get_grid_settings( $settings, 'y' ),
			] ),
		];
	}

	private function get_axis_title( $settings, $axis ) {
		$show_title_key  = "{$axis}_axis_show_title";
		$title_key       = "{$axis}_axis_title";
		$color_key       = "{$axis}_axis_title_color";
		$typography_key  = "{$axis}_axis_title_typography";
		$size_key        = "{$axis}_axis_title_size";
		$font_style_key  = "{$axis}_axis_title_font_style";
		$font_weight_key = "{$axis}_axis_title_font_weight";
		$line_height_key = "{$axis}_axis_title_line_height";

		if ( 'yes' === $settings[$show_title_key] ) {
			return [
				'display' => true,
				'text'    => $settings[$title_key] ?? '',
				'color'   => $settings[$color_key],
				'font'    => [
					'size'       => ! empty( $settings[$size_key]['size'] ) ? $settings[$size_key]['size'] : 12,
					'style'      => $settings[$font_style_key] ?? '',
					'weight'     => $settings[$font_weight_key] ?? '',
					'lineHeight' => ! empty( $settings[$line_height_key]['size'] ) ? $settings[$line_height_key]['size'] . $settings[$line_height_key]['unit'] : '',
				],
			];
		}

		return [ 'display' => false ];
	}

	private function get_axis_settings( $settings, $axis ) {
		$begin_at_zero_key = 'begin_at_zero';
		$chart_type_key    = 'chart_type';
		$stacked_key       = 'stacked';

		return [
			'beginAtZero' => ( 'yes' === $settings[$begin_at_zero_key] ) ? true : false,
			'stacked'     => ( 'bar' === $settings[$chart_type_key] && 'yes' === $settings[$stacked_key] ) ? true : false,
			'ticks'       => $this->get_ticks_settings( $settings, $axis ),
		];
	}

	private function get_grid_settings( $settings, $axis ) {
		$show_grid_lines_key = "{$axis}_axis_show_grid_lines";
		$grid_color_key      = "grid_color_{$axis}";
		$grid_width_key      = "grid_width_{$axis}";

		return [
			'display'   => ! empty( $settings[$show_grid_lines_key] ),
			'color'     => $settings[$grid_color_key],
			'lineWidth' => ! empty( $settings[$grid_width_key]['size'] ) ? $settings[$grid_width_key]['size'] : 1,
		];
	}

	private function get_ticks_settings( $settings, $axis ) {
		$show_labels_key  = "{$axis}_axis_show_labels";
		$labels_color_key = "{$axis}_axis_labels_color";
		$typography_key   = "{$axis}_axis_labels_typography";
		$size_key         = "{$axis}_axis_labels_size";
		$font_style_key   = "{$axis}_axis_labels_font_style";
		$font_weight_key  = "{$axis}_axis_labels_font_weight";
		$line_height_key  = "{$axis}_axis_labels_line_height";
		$step_size_key    = 'step_size';

		return [
			'display'  => ! empty( $settings[$show_labels_key] ),
			'color'    => $settings[$labels_color_key],
			'font'     => [
				'size'       => ! empty( $settings[$size_key]['size'] ) ? $settings[$size_key]['size'] : 12,
				'style'      => $settings[$font_style_key] ?? '',
				'weight'     => $settings[$font_weight_key] ?? '',
				'lineHeight' => ! empty( $settings[$line_height_key]['size'] ) ? $settings[$line_height_key]['size'] . $settings[$line_height_key]['unit'] : '',
			],
			'stepSize' => ! empty( $settings[$step_size_key] ) ? $settings[$step_size_key] : 0,
		];
	}

	protected function get_additional_options( $settings, $options ) {
		if ( 'yes' === $settings['show_chart_title'] && ! empty( $settings['chart_title'] ) ) {
			$options['plugins']['title'] = [
				'display' => true,
				'text'    => $settings['chart_title'] ?? '',
				'color'   => $settings['chart_title_color'],
				'font'    => [
					'size'       => ( $settings['chart_title_typography'] && $settings['chart_title_size']['size'] ) ? $settings['chart_title_size']['size'] : 12,
					'style'      => ( $settings['chart_title_typography'] && $settings['chart_title_font_style'] ) ? $settings['chart_title_font_style'] : '',
					'weight'     => ( $settings['chart_title_typography'] && $settings['chart_title_font_weight'] ) ? $settings['chart_title_font_weight'] : '',
					'lineHeight' => ( $settings['chart_title_typography'] && $settings['chart_title_line_height']['size'] ) ? $settings['chart_title_line_height']['size'] . $settings['chart_title_line_height']['unit'] : '',
				],
				'padding' => [
					'bottom' => 20,
				],
			];

			if ( 'top' !== $settings['chart_title_position'] ) {
				$options['plugins']['title']['position'] = $settings['chart_title_position'];
			}

			if ( 'center' !== $settings['chart_title_align'] ) {
				$options['plugins']['title']['align'] = $settings['chart_title_align'];
			}
		}

		if ( ! empty( $settings['show_legend'] ) && 'yes' === $settings['show_legend'] ) {
			$options['plugins']['legend'] = [
				'position' => $settings['legend_position'] ?? '',
				'align'    => $settings['legend_align'] ?? '',
				'reverse'  => ( 'yes' === $settings['legend_reverse'] ),
				'labels'   => [
					'color' => $settings['legend_color'] ?? '',
					'font'  => [
						'size'       => ( $settings['legend_typography'] && $settings['legend_size']['size'] ) ? $settings['legend_size']['size'] : 12,
						'style'      => ( $settings['legend_typography'] && $settings['legend_font_style'] ) ? $settings['legend_font_style'] : '',
						'weight'     => ( $settings['legend_typography'] && $settings['legend_font_weight'] ) ? $settings['legend_font_weight'] : '',
						'lineHeight' => ( $settings['legend_typography'] && $settings['legend_line_height']['size'] ) ? $settings['legend_line_height']['size'] . $settings['legend_line_height']['unit'] : '',
					],
				],
			];
		} else {
			$options['plugins']['legend'] = [ 'display' => false ];
		}

		if ( ! empty( $settings['chart_animation'] ) ) {
			$options['animation'] = [
				'duration' => $settings['chart_animation_duration']['size'] ?? null,
				'easing'   => $settings['chart_animation'],
				'loop'     => ! empty( $settings['chart_animation_loop'] ),
			];
		}

		if ( ! empty( $settings['show_tooltip'] ) && 'yes' === $settings['show_tooltip'] ) {
			$options['interaction']['mode'] = $settings['interaction_mode'];

			$options['plugins']['tooltip'] = [
				'backgroundColor' => $settings['tooltip_background_color'] ?? '',
				'borderColor'     => $settings['tooltip_border_color'] ?? '',
				'borderWidth'     => ( '' !== $settings['tooltip_border_width']['size'] ) ? $settings['tooltip_border_width']['size'] : 0,
				'cornerRadius'    => ( '' !== $settings['tooltip_border_radius']['size'] ) ? $settings['tooltip_border_radius']['size'] : 6,
				'padding'         => ( $settings['tooltip_padding'] ) ? $settings['tooltip_padding'] : 6,
				'titleColor'      => $settings['tooltip_title_color'] ?? '',
				'bodyColor'       => $settings['tooltip_body_color'] ?? '',
				'titleFont'       => [ 'size' => $settings['tooltip_title_font_size']['size'] ?? null ],
				'bodyFont'        => [ 'size' => $settings['tooltip_body_font_size']['size'] ?? null ],
			];

			if ( ! empty( $settings['tooltip_event'] ) && 'click' === $settings['tooltip_event'] ) {
				$options['plugins']['tooltip']['events'] = ['click'];
				$options['events'] = ['click'];
			}
		} else {
			$options['plugins']['tooltip'] = [ 'enabled' => false ];
		}

		if ( 'yes' !== $settings['maintain_aspect_ratio'] ) {
			$options['maintainAspectRatio'] = false;
		}

		return $options;
	}

	protected function bubble_chart_data_array( $bubble_data ) {
		$bubble_data = trim( $bubble_data );
		$matches = [];
		preg_match_all( '#\[([^\]]+)\]#U', $bubble_data, $matches );

		if ( empty( $matches[1] ) ) {
			return [];
		}

		$bubble = [];
		foreach ( $matches[1] as $item ) {
			$values = explode( ',', trim( $item, '[] ' ) );
			if ( 3 !== count( $values ) ) {
				continue;
			}

			$bubble[] = (object) [
				'x' => floatval( $values[0] ),
				'y' => floatval( $values[1] ),
				'r' => floatval( $values[2] ),
			];
		}

		return $bubble;
	}

	/**
	 * Render advanced charts widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @access protected
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();

		if ( isset( $settings['source'] ) ) {
			switch ( $settings['source'] ) {
				case 'csv':
					$placeholder = sprintf(
						esc_html__( 'Click here to edit the "%1$s" settings and paste the CSV text or upload the CSV file.', 'powerpack' ),
						esc_html( $this->get_title() )
					);

					echo $this->render_editor_placeholder(
						[
							'title' => esc_html__( 'CSV Text or File Missing!', 'powerpack' ),
							'body'  => $placeholder,
						]
					);
					return;

				case 'google-sheets':
					$api_key = $this->get_google_sheets_api();

					if ( empty( $api_key ) ) {
						$placeholder = sprintf(
							esc_html__( 'Click here to edit the "%1$s" settings and paste the Google Sheets API key.', 'powerpack' ),
							esc_html( $this->get_title() )
						);

						echo $this->render_editor_placeholder(
							[
								'title' => esc_html__( 'Google Sheets API Key Missing!', 'powerpack' ),
								'body'  => $placeholder,
							]
						);
						return;
					}

					if ( empty( $settings['google_sheet_url'] ) ) {
						$placeholder = sprintf(
							esc_html__( 'Click here to edit the "%1$s" settings and paste the Google Sheets URL.', 'powerpack' ),
							esc_html( $this->get_title() )
						);

						echo $this->render_editor_placeholder(
							[
								'title' => esc_html__( 'Google Sheets URL Missing!', 'powerpack' ),
								'body'  => $placeholder,
							]
						);
						return;
					}
					break;
			}
		}

		$chart_type = $this->get_chart_type();
		$datasets   = $this->get_datasets( $settings, $chart_type );
		$options    = $this->get_chart_options( $settings, $chart_type );
		$labels     = $this->get_labels();

		$datasets = apply_filters( 'pp_chart_datasets', $datasets );
		$options  = apply_filters( 'pp_chart_options', $options );

		$this->add_render_attribute( 'wrapper', 'class', 'pp-chart-wrapper' );
		$this->add_render_attribute( 'wrapper', 'data-id', esc_attr( uniqid( 'chart', true ) ) );
		$this->add_render_attribute( 'wrapper', 'style', 'position: relative;' );
		$this->add_render_attribute(
			'wrapper',
			'data-settings',
			wp_json_encode(
				array_filter(
					[
						'type'    => $chart_type,
						'data'    => [
							'labels'   => $labels,
							'datasets' => $datasets,
						],
						'options' => $options,
					]
				)
			)
		);
		?>
		<div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>></div>
		<?php
	}
}
