<?php
/*
 * Elementor eCommerce Addon Circle Progress Bar Widget
 * Author & Copyright: VictorTheme
*/

namespace Elementor;

if (!isset(get_option( 'naeca_bw_settings' )['naeca_circle_progress'])) { // enable & disable

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

class eCommerce_Elementor_Addon_Circle_Progress extends Widget_Base{

	/**
	 * Retrieve the widget name.
	*/
	public function get_name(){
		return 'naecommerce_basic_circle_progress';
	}

	/**
	 * Retrieve the widget title.
	*/
	public function get_title(){
		return esc_html__( 'Circle Progress Bar', 'ecommerce-addon' );
	}

	/**
	 * Retrieve the widget icon.
	*/
	public function get_icon() {
		return 'eicon-skill-bar';
	}

	/**
	 * Retrieve the list of categories the widget belongs to.
	*/
	public function get_categories() {
		return ['naecommerce-basic-category'];
	}
	
	/**
	 * Register eCommerce Addon Circle Progress Bar widget controls.
	 * Adds different input fields to allow the user to change and customize the widget settings.
	*/
	protected function register_controls(){
		
		$this->start_controls_section(
			'section_circle_progress',
			[
				'label' => esc_html__( 'Circle Progress Options', 'ecommerce-addon' ),
			]
		);
		$this->add_control(
			'progress_title',
			[
				'label' => esc_html__( 'Title', 'ecommerce-addon' ),
				'type' => Controls_Manager::TEXT,
				'label_block' => true,
				'default' => esc_html__( 'Default title', 'ecommerce-addon' ),
				'placeholder' => esc_html__( 'Type your counter title here', 'ecommerce-addon' ),
			]
		);
		$this->add_control(
			'progress_value',
			[
				'label' => esc_html__( 'Value', 'ecommerce-addon' ),
				'type' => Controls_Manager::NUMBER,
				'min' => 1,
				'step' => 1,
				'default' => 90,
				'description' => esc_html__( 'Type your counter value here', 'ecommerce-addon' ),
			]
		);
		$this->add_control(
			'progress_value_in',
			[
				'label' => esc_html__( 'Value In', 'ecommerce-addon' ),
				'type' => Controls_Manager::TEXT,
				'label_block' => true,
				'default' => esc_html__( '%', 'ecommerce-addon' ),
				'placeholder' => esc_html__( 'Type your counter value here', 'ecommerce-addon' ),
			]
		);
		$this->add_control(
			'section_size',
			[
				'label' => esc_html__( 'Circle Size', 'ecommerce-addon' ),
				'type' => Controls_Manager::TEXT,
				'label_block' => true,
				'default' => esc_html__( '210', 'ecommerce-addon' ),
				'placeholder' => esc_html__( 'Type your circle size', 'ecommerce-addon' ),
			]
		);
		$this->end_controls_section();// end: Section

		// General
			$this->start_controls_section(
				'section_general_style',
				[
					'label' => esc_html__( 'General', 'ecommerce-addon' ),
					'tab' => Controls_Manager::TAB_STYLE,
					'frontend_available' => true,
				]
			);
			$this->add_control(
				'circle_bg_color',
				[
					'label' => esc_html__( 'Background Color', 'ecommerce-addon' ),
					'type' => Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .circle-progressbar canvas' => 'background: {{VALUE}};',
					],
				]
			);
			$this->add_control(
				'fill_color',
				[
					'label' => esc_html__( 'Fill Color', 'ecommerce-addon' ),
					'type' => Controls_Manager::COLOR,
				]
			);
			$this->add_control(
				'empty_color',
				[
					'label' => esc_html__( 'Empty Fill Color', 'ecommerce-addon' ),
					'type' => Controls_Manager::COLOR,
				]
			);
			$this->end_controls_section();// end: Section

		// Title
			$this->start_controls_section(
				'section_title_style',
				[
					'label' => esc_html__( 'Title', 'ecommerce-addon' ),
					'tab' => Controls_Manager::TAB_STYLE,
					'condition' => [
						'progress_title!' => '',
					],
					'frontend_available' => true,
				]
			);
			$this->add_group_control(
				Group_Control_Typography::get_type(),
				[
					'name' => 'title_typography',
					'selector' => '{{WRAPPER}} .circle-prog-item h2',
				]
			);
			$this->add_control(
				'title_color',
				[
					'label' => esc_html__( 'Color', 'ecommerce-addon' ),
					'type' => Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .circle-prog-item h2' => 'color: {{VALUE}};',
					],
				]
			);
			$this->end_controls_section();// end: Section
		
		// Value
			$this->start_controls_section(
				'section_value_style',
				[
					'label' => esc_html__( 'Value', 'ecommerce-addon' ),
					'tab' => Controls_Manager::TAB_STYLE,
					'condition' => [
						'progress_value!' => '',
					],
					'frontend_available' => true,
				]
			);
			$this->add_group_control(
				Group_Control_Typography::get_type(),
				[
					'name' => 'value_typography',
					'selector' => '{{WRAPPER}} .circle-counter',
				]
			);
			$this->add_control(
				'value_color',
				[
					'label' => esc_html__( 'Color', 'ecommerce-addon' ),
					'type' => Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .circle-counter' => 'color: {{VALUE}};',
					],
				]
			);
			$this->end_controls_section();// end: Section
		
		// Value In
			$this->start_controls_section(
				'section_value_in_style',
				[
					'label' => esc_html__( 'Value In', 'ecommerce-addon' ),
					'tab' => Controls_Manager::TAB_STYLE,
					'condition' => [
						'progress_value_in!' => '',
					],
					'frontend_available' => true,
				]
			);
			$this->add_group_control(
				Group_Control_Typography::get_type(),
				[
					'name' => 'value_in_typography',
					'selector' => '{{WRAPPER}} .valuein',
				]
			);
			$this->add_control(
				'value_in_color',
				[
					'label' => esc_html__( 'Color', 'ecommerce-addon' ),
					'type' => Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .valuein' => 'color: {{VALUE}};',
					],
				]
			);
			$this->end_controls_section();// end: Section
				
	}

	/**
	 * Render Counter widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	*/
	protected function render() {
		$settings = $this->get_settings_for_display();
		$progress_title = !empty( $settings['progress_title'] ) ? $settings['progress_title'] : '';
		$progress_value = !empty( $settings['progress_value'] ) ? $settings['progress_value'] : '';
		$progress_value_in = !empty( $settings['progress_value_in'] ) ? $settings['progress_value_in'] : '';
		$section_size = !empty( $settings['section_size'] ) ? $settings['section_size'] : '';
		$fill_color = !empty( $settings['fill_color'] ) ? $settings['fill_color'] : '';
		$empty_color = !empty( $settings['empty_color'] ) ? $settings['empty_color'] : '';

		$fill_color_actual = $fill_color ? $fill_color : '#40407a';
    $empty_fill_actual = $empty_color ? $empty_color : '#ffffff';

		// Counter Title
		$progress_title = $progress_title ? '<h2>'.$progress_title.'</h2>' : '';

		// ValueIn
		$progress_value_in = $progress_value_in ? $progress_value_in : '%';
		$data_val = $progress_value ? $progress_value / 100 : '';


		// Counters
		$output = '<div class="naeca-circle-prog circle-prog-item">
						    <div class="circle-progressbar" data-value="'.$data_val.'" data-size="'.$section_size.'" data-color="'.$fill_color_actual.'" data-empty="'.$empty_fill_actual.'">
						      <h3 class="circle-progressbar-counter"><span class="circle-counter">'.$progress_value.'</span><span class="valuein">'.$progress_value_in.'</span></h3>
						    </div>
						    '.$progress_title.'
						  </div>';						  
		// Output
		echo $output;

		if ( Plugin::$instance->editor->is_edit_mode() ) : ?>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
			  "use strict";
			  // Circle Progress Bar Script
		    $('.circle-progressbar').each(function() {
		    var $circle = $(this);
		    var $fill_color = ($circle.data('color') !== undefined) ? $circle.data('color') : '#40407a';
		    var $empty_fill_color = ($circle.data('empty') !== undefined) ? $circle.data('empty') : '#ffffff';
		    var $size = ($circle.data('size') !== undefined) ? $circle.data('size') : '210';

		      $circle.waypoint(function() {
		        $circle.circleProgress ({
		          size: $size,
		          fill: {
		            color: $fill_color,
		          },
		          thickness: 5,
		          emptyFill: $empty_fill_color,
		          startAngle: 300,
		          reverse: true,
		          lineCap: 'squre',
		          animation: {
		            duration: 1800
		          }
		        })
		        .on('circle-animation-progress', function (event, progress, stepValue) {
		          $(this).find('.circle-counter').text((stepValue * 100).toFixed(0));
		        });
		      },
		      {
		        offset: '100%',
		        triggerOnce: true,
		      });
		    });
			});
		</script>
		<?php endif;
		
	}

	/**
	 * Render Counter widget output in the editor.
	 * Written as a Backbone JavaScript template and used to generate the live preview.
	*/
	 
	//protected function _content_template(){}
	
}
Plugin::instance()->widgets_manager->register_widget_type( new eCommerce_Elementor_Addon_Circle_Progress() );

} // enable & disable
