<?php

namespace Elementor;
class ThemeDraft_CountUp_Two_Widget extends Widget_Base {

	public function get_name() {

		return "themedraft_count_up_two";
	}

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

	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 Two', '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', 'themedraft-core' ),
				'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(
			'entrance_animation',
			[
				'label' => __( 'Entrance Animation', 'themedraft-core' ),
				'type' => Controls_Manager::ANIMATION,
				'prefix_class' => 'animated ',
			]
		);

		$repeater->add_control(
			'count_two_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' => 'col-xl-3',
				'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-3',
				'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-3',
				'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-6',
				'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(
            'number_style',
            [
                'label' => esc_html__( 'Number', 'themedraft-core' ),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'number_typo',
                'label' => __( 'Typography', 'themedraft-core' ),
                'selector' => '{{WRAPPER}} .td-counter-box-two-wrapper .td-count-number,{{WRAPPER}} .td-counter-box-two-wrapper .td-count-unit',
            ]
        );

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

        $this->end_controls_section();

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

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'title_typo',
                'label' => __( 'Typography', 'themedraft-core' ),
                'selector' => '{{WRAPPER}} .td-counter-box-two-wrapper .td-count-title',
            ]
        );

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

        $this->end_controls_section();

        $this->start_controls_section(
            'box_style',
            [
                'label' => esc_html__( 'Wrapper & Box', 'themedraft-core' ),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'wrapper_bg',
                'label' => esc_html__( 'Wrapper Background', 'themedraft-core' ),
                'types' => [ 'classic', 'gradient'],
                'selector' => '{{WRAPPER}} .td-counter-box-two-wrapper',
            ]
        );

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'box_shadow',
				'label' => __( 'Box Shadow', 'themedraft-core' ),
				'selector' => '{{WRAPPER}} .td-counter-box-two-wrapper',
			]
		);

		$this->add_responsive_control(
		    'wrapper_border_radius',
		    [
		        'label' => __( 'Wrapper Border Radius', 'themedraft-core' ),
		        'type' => Controls_Manager::SLIDER,
		        'size_units' => ['px'],
		        'range' => [
		            'px' => [
		                'min' => 0,
		                'max' => 100,
		            ],
		        ],
		        'devices' => [ 'desktop', 'tablet', 'mobile' ],
		        'selectors' => [
		            '{{WRAPPER}} .td-counter-box-two-wrapper' => 'border-radius: {{SIZE}}{{UNIT}};',
		        ],
		    ]
		);

		$this->add_responsive_control(
		    'box_padding',
		    [
		        'label'      => esc_html__( 'Box Padding', 'themedraft-core' ),
		        'type'       => Controls_Manager::DIMENSIONS,
		        'size_units' => [ 'px', '%', 'em' ],
		        'selectors'  => [
		            '{{WRAPPER}} .td-single-counter-box-two' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		        ],
		    ]
		);

		$this->add_responsive_control(
		    'text_align',
		    [
		        'label'       => esc_html__('Text Align', 'themedraft-core'),
		        'description' => esc_html__('', 'themedraft-core'),
		        'type'        => Controls_Manager::CHOOSE,
		        'label_block' => false,

		        'options' => [
		            'left' => [
		                'title' => __('Left', 'themedraft-core'),
		                'icon'  => 'fa fa-align-left',
		            ],

		            'center' => [
		                'title' => __('Center', 'themedraft-core'),
		                'icon'  => 'fa fa-align-center',
		            ],

		            'right' => [
		                'title' => __('Right', 'themedraft-core'),
		                'icon'  => 'fa fa-align-right',
		            ],
		        ],
		        'devices' => ['desktop', 'tablet', 'mobile'],

		        'selectors' => [
		            '{{WRAPPER}} .td-counter-box-two-wrapper' => 'text-align: {{VALUE}};',
		        ],

		    ]
		);

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

		$this->add_control(
		    'border_position_toggle',
		    [
		        'label'        => __( 'Right Border Position', 'themedraft-core' ),
		        'type'         => Controls_Manager::POPOVER_TOGGLE,
		        'label_off'    => __( 'None', 'themedraft-core' ),
		        'label_on'     => __( 'Custom', 'themedraft-core' ),
		        'return_value' => 'yes',
		    ]
		);

		$this->start_popover();

		$this->add_responsive_control(
		    'border_vertical_position',
		    [
		        'label'      => __( 'Vertical', 'themedraft-core' ),
		        'type'       => Controls_Manager::SLIDER,
		        'size_units' => [ 'px' ],
		        'range'      => [
		            'px' => [
		                'min' => - 1000,
		                'max' => 1000,
		            ],
		        ],
		        'selectors'  => [
		            '{{WRAPPER}} .td-single-counter-box-two:after' => 'top: {{SIZE}}{{UNIT}};',
		        ],
		        'condition'  => [
		            'border_position_toggle' => 'yes',
		        ]
		    ]
		);

		$this->add_responsive_control(
		    'border_horizontal_position',
		    [
		        'label'      => __( 'Horizontal', 'themedraft-core' ),
		        'type'       => Controls_Manager::SLIDER,
		        'size_units' => [ 'px' ],
		        'range'      => [
		            'px' => [
		                'min' => - 1000,
		                'max' => 1000,
		            ],
		        ],
		        'selectors'  => [
		            '{{WRAPPER}} .td-single-counter-box-two:after' => 'right: {{SIZE}}{{UNIT}};',
		        ],
		        'condition'  => [
		            'border_position_toggle' => 'yes',
		        ]
		    ]
		);
		$this->end_popover();

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

        $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-two-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_two_animation_duration'];
	                        }else{
		                        $td_animation ='';
		                        $td_animation_duration ='';
	                        }
                            ?>
                            <div class="count-two-col <?php echo $td_column;?>">
                                <div class="td-single-counter-box-two td-transition <?php echo $td_animation;?>" <?php echo $td_animation_duration;?>>
                                    <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_Two_Widget );