<?php
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
Use Elementor\Core\Schemes\Typography;

defined( 'ABSPATH' ) || exit; // Exit if accessed directly
/**
 *
 * Course Progress widget.
 *
 * @since 1.0.0
 */
class Widgetkit_Pro_LearnDash_Course_Progress extends Widget_Base {

	public function get_name() {
		return 'widgetkit-pro-learndash-course-progress';
	}

	public function get_title() {
		return __( 'Learndash Course Progress', 'widgetkit-pro' );
	}

	public function get_icon() {
		return 'eicon-clock';
	}

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

	public function get_style_depends() {
        return [
            'widgetkit_pro_default',
        ];
    }

	protected function register_controls() {

		//title style
		$this->start_controls_section(
			'title_style',
			[
				'label' => esc_html__( 'Title', 'widgetkit-pro' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

			$this->add_control(
				'title_color',
				[
					'label'     => esc_html__( 'Color', 'widgetkit-pro' ),
					'type'      => Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ld-course-status .ld-course-status-top .ld-course-progress-heading h4' => 'color: {{VALUE}};',
					]
				]
			);
			$this->add_group_control(
				Group_Control_Typography::get_type(),
					[
						'name'     => 'title_typography',
						'label'    => esc_html__( 'Typography', 'widgetkit-pro' ),
						'selector' => '{{WRAPPER}} .ld-course-status .ld-course-status-top .ld-course-progress-heading h4',
					]
			);


			$this->add_responsive_control(
				'title_spacing',
					[
						'label'   => esc_html__( 'Spacing', 'widgetkit-pro' ),
						'type'    => Controls_Manager::SLIDER,
						'range'  => [
							'px' => [
								'min' => 0,
								'max' => 200,
							],
						],
						'selectors' => [
							'{{WRAPPER}} .ld-course-status .ld-course-status-top .ld-course-progress-heading h4' => 'margin-bottom: {{SIZE}}{{UNIT}};',
						]
					]
			);

		$this->end_controls_section();

		
		//steps style	
		$this->start_controls_section(
			'steps_style',
			[
				'label' => esc_html__( 'Steps', 'widgetkit-pro' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);
			
			$this->add_control(
				'steps_color',
				[
					'label'     => esc_html__( 'Color', 'widgetkit-pro' ),
					'type'      => Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ld-course-status .ld-course-status-top .ld-course-progress-heading h4 span' => 'color: {{VALUE}};',
					]
				]
			);
			$this->add_group_control(
				Group_Control_Typography::get_type(),
					[
						'name'     => 'steps_typography',
						'label'    => esc_html__( 'Typography', 'widgetkit-pro' ),
						'selector' => '{{WRAPPER}} .ld-course-status .ld-course-status-top .ld-course-progress-heading h4 span',
					]
			);


			$this->add_responsive_control(
				'steps_spacing',
					[
						'label'   => esc_html__( 'Spacing', 'widgetkit-pro' ),
						'type'    => Controls_Manager::SLIDER,
						'range'  => [
							'px' => [
								'min' => 0,
								'max' => 200,
							],
						],
						'selectors' => [
							'{{WRAPPER}} .ld-course-status .ld-course-status-top .ld-course-progress-heading h4 span' => 'margin-top: {{SIZE}}{{UNIT}};',
						]
					]
			);


		$this->end_controls_section();


		// activity style
		$this->start_controls_section(
			'content_style',
			[
				'label' => esc_html__( 'Content', 'widgetkit-pro' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

			$this->add_control(
				'activity_color',
				[
					'label'     => esc_html__( 'Color', 'widgetkit-pro' ),
					'type'      => Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ld-course-status .ld-course-status-top .ld-course-progress-activity p' => 'color: {{VALUE}};',
					]
				]
			);

			$this->add_group_control(
				Group_Control_Typography::get_type(),
					[
						'name'     => 'activity_typography',
						'label'    => esc_html__( 'Typography', 'widgetkit-pro' ),
						'selector' => '{{WRAPPER}} .ld-course-status .ld-course-status-top .ld-course-progress-activity p,{{WRAPPER .ld-course-status .ld-course-status-bottom .ld-course-status-button-status',
					]
			);

		$this->end_controls_section();


		//progressbar style
		$this->start_controls_section(
			'progressbar_style',
			[
				'label' => esc_html__( 'Progress Bar', 'widgetkit-pro' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

			$this->add_control(
				'progressbar_bg_color',
				[
					'label'     => esc_html__( 'Background Color', 'widgetkit-pro' ),
					'type'      => Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ld-course-status .ld-course-status-bottom .ld-course-progress-bar' => 'background-color: {{VALUE}};',
					]
				]
			);

			$this->add_control(
				'progressbar_fill_color',
				[
					'label'     => esc_html__( 'Fill Color', 'widgetkit-pro' ),
					'type'      => Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ld-course-status .ld-course-status-bottom .ld-course-progress-bar .ld-course-progress-bar-percentage' => 'background-color: {{VALUE}};',
					]
				]
			);	

			$this->add_control(
				'progressbar_border_radius',
				[
					'label' => esc_html__( 'Border Radius', 'widgetkit-pro' ),
					'type'  => Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%' ],
					'selectors'  => [
						'{{WRAPPER}} .ld-course-status .ld-course-status-bottom .ld-course-progress-bar' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
						'{{WRAPPER}} .ld-course-status .ld-course-status-bottom .ld-course-progress-bar .ld-course-progress-bar-percentage' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					]
				]
			);


		$this->end_controls_section();

		$this->start_controls_section(
			'global_style',
			[
				'label' => esc_html__( 'Global', 'widgetkit-pro' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);
				
			$this->add_responsive_control(
				'content_padding',
				[
					'label' => esc_html__( 'Padding', 'widgetkit-pro' ),
					'type'  => Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%' ],
					'selectors'  => [
						'{{WRAPPER}} .ld-course-status' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					]
				]
			);
			
			$this->add_group_control(
				Group_Control_Border::get_type(),
				[
					'name' => 'content_border',
					'selector' => '{{WRAPPER}} .ld-course-status',
					'separator' => 'before',
				]
			);		

			$this->add_control(
				'content_border_radius',
				[
					'label' => esc_html__( 'Border Radius', 'widgetkit-pro' ),
					'type'  => Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%' ],
					'selectors'  => [
						'{{WRAPPER}} .ld-course-status' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					]
				]
			);

			$this->add_control(
				'content_item_bg_color',
				[
					'label'     => esc_html__( 'Background Color', 'widgetkit-pro' ),
					'type'      => Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ld-course-status' => 'background: {{VALUE}};',
					]
				]
			);

		$this->end_controls_section();

	}

	protected function render() {
		include( plugin_dir_path( __FILE__ ) . '../layout/learndash-course-progress.php');
	}

}