<?php

namespace Elementor;
class ThemeDraft_CountUp_Widget extends Widget_Base {

	public function get_name() {

		return "themedraft_count_up";
	}

	public function get_title() {
		return "Count Up";
	}

	public function get_icon() {

		return "eicon-counter";
	}

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

	public function get_script_depends() {
		return ['counterup'];
	}

	protected function register_controls() {
		//Start Control Section
		$this->start_controls_section(
			'count_up_options',
			[
				'label' => __( 'Count Up Box', 'themedraft-core' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);


		$repeater = new Repeater();

		$repeater->add_control(
			'count_number',
			[
				'label'   => __( 'Count Number', 'themedraft-core' ),
				'type'    => Controls_Manager::NUMBER,
				'default' => '100',
			]
		);

		$repeater->add_control(
			'count_unit',
			[
				'label'   => 'Counter Unit',
				'type'    => Controls_Manager::TEXT,
				'default' => '+',
			]
		);

		$repeater->add_control(
			'count_title',
			[
				'label'       => __( 'Count Title', 'themedraft-core' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => 'Counter Title',
				'label_block' => true,
			]
		);


		$repeater->add_control(
			'type',
			[
				'label'       => __( 'Hover Icon Type', 'themedraft-core' ),
				'type'        => Controls_Manager::CHOOSE,
				'label_block' => false,
				'options'     => [
					'icon'  => [
						'title' => __( 'Icon', 'themedraft-core' ),
						'icon'  => 'fa fa-info-circle',
					],
					'image' => [
						'title' => __( 'Image', 'themedraft-core' ),
						'icon'  => 'fa fa-image',
					],
				],
				'default'     => 'icon',
				'toggle'      => false,
			]
		);

		$repeater->add_control(
			'selected_icon',
			[
				'label'       => __( 'Select Hover Icon', 'themedraft-core' ),
				'type'             => Controls_Manager::ICONS,
				'fa4compatibility' => 'icon',
				'label_block'      => true,
				'default'          => [
					'value'   => 'flaticon-industry-factory-1',
					'library' => 'themedraft-industry',
				],
				'condition' => [
					'type' => 'icon',
				],
			]
		);

		$repeater->add_control(
			'image',
			[
				'label'     => __( 'Image', 'themedraft-core' ),
				'type'      => Controls_Manager::MEDIA,
				'default'   => [
					'url' => Utils::get_placeholder_image_src(),
				],
				'condition' => [
					'type' => 'image',
				],
			]
		);

		$repeater->add_control(
			'entrance_animation',
			[
				'label' => __( 'Entrance Animation', 'themedraft-core' ),
				'type' => Controls_Manager::ANIMATION,
				'prefix_class' => 'animated ',
			]
		);

		$repeater->add_control(
			'count_animation_duration',
			[
				'label'     => __( 'Animation Duration', 'themedraft-core' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'data-wow-duration="1.25s"',
				'options'   => [
					'data-wow-duration="2s"'    => __( 'Slow', 'themedraft-core' ),
					'data-wow-duration="1.25s"' => __( 'Normal', 'themedraft-core' ),
					'data-wow-duration=".75s"'  => __( 'Fast', 'themedraft-core' ),
				],
				'condition' => [
					'entrance_animation!' => '',
				]
			]
		);


		$this->add_control(
			'count_boxes',
			[
				'label'       => __('Count Box List', 'themedraft-core'),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => [
					[
						'count_title'        => 'Counter Title',
						'count_unit' => '+',
						'count_number' => '100',
						'selected_icon' => 'flaticon-industry-factory-1',
					],
				],
				'title_field' => '{{{ count_title }}}',
			]
		);

		$this->end_controls_section();//End Control Section


		$this->start_controls_section(
			'counter_column_options',
			[
				'label' => esc_html__( 'Column Settings', 'themedraft-core' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'xl_column',
			[
				'label'   => __( 'Desktop', 'themedraft-core' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'td-col-xl-5',
				'options' => [
					'col-xl-12'   => __( '1 Column', 'themedraft-core' ),
					'col-xl-6'    => __( '2 Column', 'themedraft-core' ),
					'col-xl-4'    => __( '3 Column', 'themedraft-core' ),
					'col-xl-3'    => __( '4 Column', 'themedraft-core' ),
					'td-col-xl-5' => __( '5 Column', 'themedraft-core' ),
				],
			]
		);

		$this->add_control(
			'lg_column',
			[
				'label'   => __( 'iPad Pro', 'themedraft-core' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'col-lg-4',
				'options' => [
					'col-lg-12'   => __( '1 Column', 'themedraft-core' ),
					'col-lg-6'    => __( '2 Column', 'themedraft-core' ),
					'col-lg-4'    => __( '3 Column', 'themedraft-core' ),
					'col-lg-3'    => __( '4 Column', 'themedraft-core' ),
					'td-col-lg-5' => __( '5 Column', 'themedraft-core' ),
				],
			]
		);

		$this->add_control(
			'md_column',
			[
				'label'   => __( 'iPad', 'themedraft-core' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'col-md-4',
				'options' => [
					'col-md-12'   => __( '1 Column', 'themedraft-core' ),
					'col-md-6'    => __( '2 Column', 'themedraft-core' ),
					'col-md-4'    => __( '3 Column', 'themedraft-core' ),
					'col-md-3'    => __( '4 Column', 'themedraft-core' ),
				],
			]
		);

		$this->add_control(
			'sm_column',
			[
				'label'   => __( 'Mobile', 'themedraft-core' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'col-12',
				'options' => [
					'col-12'   => __( '1 Column', 'themedraft-core' ),
					'col-6'    => __( '2 Column', 'themedraft-core' ),
					'col-4'    => __( '3 Column', 'themedraft-core' ),
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'counter_up_box_style',
			[
				'label' => esc_html__( 'Colors', 'themedraft-core' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->start_controls_tabs('td_counter_style_tabs');

		//Default style tab start
		$this->start_controls_tab(
			'td_counter_style_default',
			[
				'label' => esc_html__('Normal', 'themedraft-core'),
			]
		);

		$this->add_control(
			'number_color',
			[
				'label'       => esc_html__('Number Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-count-number, {{WRAPPER}} .td-count-unit' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'title_color',
			[
				'label'       => esc_html__('Title Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-count-title' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'background_color',
			[
				'label'       => esc_html__('Background Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-single-counter-box' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_tab();//Default style tab end

		//Hover style tab start
		$this->start_controls_tab(
			'td_counter_style_hover',
			[
				'label' => esc_html__('Hover', 'themedraft-core'),
			]
		);


		$this->add_control(
			'number_color_on_hover',
			[
				'label'       => esc_html__('Number Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-single-counter-box:hover .td-count-number, {{WRAPPER}} .td-single-counter-box:hover .td-count-unit' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'title_color_on_hover',
			[
				'label'       => esc_html__('Title Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-single-counter-box:hover .td-count-title' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'background_color_on_hover',
			[
				'label'       => esc_html__('Background Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-single-counter-box:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'icon_color_on_hover',
			[
				'label'       => esc_html__('Icon Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-count-icon' => 'color: {{VALUE}};',
					'{{WRAPPER}} .td-count-icon .td-icon-wrapper svg' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'top_shape_color',
			[
				'label'       => esc_html__('Top Shape Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-single-counter-box:hover:before' => 'border-top-color: {{VALUE}};border-left-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_tabs();//Hover style tab end

		$this->end_controls_section();

	}

	//Render In HTML
	protected function render() {
		$settings = $this->get_settings_for_display();
		$td_column = $settings['xl_column'] .' '. $settings['lg_column']. ' '. $settings['md_column']. ' '. $settings['sm_column'];
		$count_id = rand(100, 100000);
		?>

        <div class="td-counter-box-wrapper td-counter-box-<?php echo esc_attr($count_id);?>">

            <div class="row">
				<?php if($settings['count_boxes']){
					foreach ($settings['count_boxes'] as $count_box){
						if($count_box['entrance_animation']){
							$td_animation = 'wow'.' ' . $count_box['entrance_animation'];
							$td_animation_duration = $count_box['count_animation_duration'];
						}else{
							$td_animation ='';
							$td_animation_duration ='';
						}
						?>
                        <div class="<?php echo $td_column;?>">
                            <div class="td-single-counter-box td-transition <?php echo $td_animation;?>" <?php echo $td_animation_duration;?>>
                                <div class="td-count-icon td-transition">
									<?php if ( $count_box['type'] === 'image' ) :
										if ( $count_box['image']['url'] || $count_box['image']['id'] ) :
											?>
                                            <div class="td-icon-wrapper td-image-icon">
                                                <img src="<?php echo $count_box['image']['url']; ?>"
                                                     alt="<?php echo get_post_meta( $count_box['image']['id'], '_wp_attachment_image_alt', true ); ?>">
                                            </div>
										<?php endif;
                                    elseif ( ! empty( $count_box['icon'] ) || ! empty( $count_box['selected_icon'] ) ) : ?>
                                        <div class="td-icon-wrapper td-font-icon">
											<?php themedraft_custom_icon_render( $count_box, 'icon', 'selected_icon' ); ?>
                                        </div>
									<?php endif; ?>
                                </div>

                                <div class="td-number-unit">
                                    <h5 class="td-count-number td-transition"><?php echo esc_html( $count_box['count_number'] ) ?></h5>
                                    <h5 class="td-count-unit td-transition"><?php echo esc_html( $count_box['count_unit'] ) ?></h5>
                                </div>

                                <h6 class="td-count-title td-transition"><?php echo esc_html( $count_box['count_title'] ) ?></h6>
                            </div>
                        </div>

						<?php

					}
				} ?>
            </div>

        </div>
        <script>
            (function ($) {
                "use strict";
                /*====  Document Ready Function =====*/
                jQuery(document).ready(function($){
                    $(".td-counter-box-<?php echo esc_attr($count_id);?> .td-count-number").counterUp({
                        delay: 10,
                        time: 2000
                    });
                });
            }(jQuery));
        </script>
		<?php
	}
}

Plugin::instance()->widgets_manager->register( new ThemeDraft_CountUp_Widget );