<?php
/**
 * Elementor Fun Factor Widget.
 *
 * Elementor widget that inserts an embbedable content into the page, from any given URL.
 *
 * @since 1.0.5
 */
class Elementor_Fun_Factor_Widget extends \Elementor\Widget_Base {

	/**
	 * Get widget name.
	 *
	 * Retrieve Fun Factor widget name.
	 *
	 * @since 1.0.5
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return 'fun-factor';
	}

	/**
	 * Get widget title.
	 *
	 * Retrieve Fun Factor widget title.
	 *
	 * @since 1.0.5
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return __( 'Fun Factor', 'endless-addons' );
	}

	/**
	 * Get widget icon.
	 *
	 * Retrieve Fun Factor widget icon.
	 *
	 * @since 1.0.5
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return 'fa fa-heart-o';
	}

	/**
	 * Get widget categories.
	 *
	 * Retrieve the list of categories the Fun Factor widget belongs to.
	 *
	 * @since 1.0.5
	 * @access public
	 *
	 * @return array Widget categories.
	 */
	public function get_categories() {
		return [ 'endless-elements' ];
	}

	/**
	 * Register Fun Factor widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @since 1.0.5
	 * @access protected
	 */
	protected function register_controls() {

		$this->start_controls_section(
			'default_section',
			[    
				'label' => __( 'Settings', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT
			]
		);

		$this->add_control(
			'show_fun_factor',
			[
				'label' => __( 'Show/Hide Fun Factor Section', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'show' => [
						'title' => __( 'Show', 'endless-addons' ),
						'icon' => 'fa fa-check'
					],
					'hide' => [
						'title' => __( 'Hide', 'endless-addons' ),
						'icon' => 'fa fa-close'
					]
				],
				'default' => 'show',
				'toggle' => true
			]
		);

		$this->add_control(
			'select_fun_factor_style',
			[
				'label' => __( 'Select Fun Factor Style', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::SELECT,
				'input_type' => 'SELECT',
				'options' => [
					'style-01' => __( 'Style 01', 'endless-addons' ),
					'style-02' => __( 'Style 02', 'endless-addons' ),
					'style-03' => __( 'Style 03', 'endless-addons' ),
					'style-04' => __( 'Style 04', 'endless-addons' ),
					'style-05' => __( 'Style 05', 'endless-addons' ),
					'style-06' => __( 'Style 06', 'endless-addons' ),
					'style-07' => __( 'Style 07', 'endless-addons' ),
					'style-08' => __( 'Style 08', 'endless-addons' ),
					'style-09' => __( 'Style 09', 'endless-addons' )
				],
				'default' => 'style-01'
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'fun_factor_section',
			[
				'label' => __( 'Fun Factor Section', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'section_title',
			[
				'label' => __( 'Section Title', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'input_type' => 'text',
				'placeholder' => __( 'Title', 'endless-addons' ),
				'default'  => __( 'Design 1', 'endless-addons' )
			]
		);

		$this->add_control(
			'section_desc',
			[
				'label' => __( 'Section Description', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::WYSIWYG,
				'input_type' => 'WYSIWYG',
				'placeholder' => __( 'Description', 'endless-addons' ),
				'default' => __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.', 'endless-addons')
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name' => 'section_background',
				'label' => __( 'Background', 'plugin-domain' ),
				'types' => [ 'classic', 'gradient', 'video' ],
				'selector' => '{{WRAPPER}} .ea-fun-factor-area',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'fun_factor_content',
			[
				'label' => __( 'Fun Factor Content', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'fun_factor_featured_img',
			[
				'label' => __( 'Featured Image', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::MEDIA,
				'show_label' => true,
				'condition' => [
                    'select_fun_factor_style' => 'style-08',
                ]
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Image_Size::get_type(),
			[
				'name' => 'thumbnail',
				'default' => 'full',
				'separator' => 'none',
				'exclude' => [
					'full',
					'custom',
					'large',
					'shop_catalog',
					'shop_single',
					'shop_thumbnail'
				],
				'condition' => [
					'select_fun_factor_style' => 'style-08',
				]
			]
		);

		$this->add_control(
			'fun_factor_item_column',
			[
				'label' => __( 'Select Fun Factor Column', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::SELECT,
				'input_type' => 'SELECT',
				'options' => [
					'columns-2' => __( '2', 'endless-addons' ),
					'columns-3' => __( '3', 'endless-addons' ),
					'columns-4' => __( '4', 'endless-addons' )
				],
				'default' => 'columns-4'
			]
		);

		$this->add_control(
            'funfactor_icon_v_alignment',
            [
                'label' => esc_html__('Icon/Image/Number Vertical Alignment', 'endless-addons'),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'label_block' => true,
                'options' => [
                    'top' => [
                        'title' => __('Top', 'endless-addons'),
                        'icon' => 'eicon-v-align-top',
                    ],
                    'bottom' => [
                        'title' => __('Bottom', 'endless-addons'),
                        'icon' => 'eicon-v-align-bottom',
                    ],
                ],
                'default' => 'top',
                'condition' => [
                    'select_fun_factor_style' => array('style-02', 'style-03', 'style-04', 'style-06', 'style-07', 'style-08'),
                ]
            ]
        );

        $this->add_control(
            'funfactor_icon_h_alignment',
            [
                'label' => esc_html__('Icon/Image/Number Horizontal Alignment', 'endless-addons'),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'label_block' => true,
                'options' => [
                    'left' => [
                        'title' => __('Left', 'endless-addons'),
                        'icon' => 'eicon-h-align-left'
                    ],
                    'right' => [
                        'title' => __('Right', 'endless-addons'),
                        'icon' => 'eicon-h-align-right'
                    ],
                ],
                'default' => 'left',
                'condition' => [
                    'select_fun_factor_style' => array('style-01', 'style-05', 'style-09'),
                ]
            ]
        );

		$repeater = new \Elementor\Repeater();

		$repeater->add_control(
            'single_fun_factor_img_or_icon',
            [
                'label' => esc_html__('Show Image, Icon or Number', 'endless-addons'),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'label_block' => true,
                'options' => [
                    'none' => [
                        'title' => esc_html__('None', 'endless-addons'),
                        'icon' => 'fa fa-ban',
                    ],
                    'icon' => [
                        'title' => esc_html__('Icon', 'endless-addons'),
                        'icon' => 'fa fa-info-circle',
                    ],
                    'img' => [
                        'title' => esc_html__('Image', 'endless-addons'),
                        'icon' => 'fa fa-picture-o',
                    ],
                    'number' => [
                        'title' => esc_html__('Number', 'endless-addons'),
                        'icon' => 'fa fa-sort-numeric-desc',
                    ],
                ],
                'default' => 'img',
            ]
        );

		$repeater->add_control(
			'single_fun_factor_icon', [
				'label' => __( 'Icon', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::MEDIA,
                'show_label' => true,
                'default' => [
					'url' => plugin_dir_url( dirname( __FILE__ ) ) . '../public/img/funfactor/fun-factor-icon-1.png'
				],
				'condition' => [
                    'single_fun_factor_img_or_icon' => 'img'
                ]
			]
		);

		$repeater->add_control(
			'single_fun_factor_icon_fa', [
				'label' => __( 'Icon', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::ICONS,
				'input_type' => 'icon',
				'show_label' => true,
				'options' => endless_addons_icons(),
				'condition' => [
                    'single_fun_factor_img_or_icon' => 'icon'
                ]
			]
		);

		$repeater->add_control(
			'single_fun_factor_number', [
				'label' => __( 'Number', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::NUMBER,
                'show_label' => true,
                'default' => '1',
				'condition' => [
                    'single_fun_factor_img_or_icon' => 'number'
                ]
			]
		);

		$repeater->add_control(
			'single_fun_factor_data', [
				'label' => __( 'Data', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'input_type' => 'text',
				'placeholder' => __( 'Data', 'endless-addons' ),
				'default'  => __( '25', 'endless-addons' )
			]
		);

		$repeater->add_control(
			'single_fun_factor_title', [
				'label' => __( 'Title', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'input_type' => 'text',
				'placeholder' => __( 'Title', 'endless-addons' ),
				'default'  => __( 'Years of Experience', 'endless-addons' )
			]
		);

		$this->add_control(
			'single_fun_factor',
			[
				'label' => __( 'Single Fun Factor', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'list_title' => __( 'Single Fun Factor #1', 'endless-addons' ),
						'list_content' => __( 'Single Fun Factor Content', 'endless-addons' ),
					],
				
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style',
			[
				'label' => __( 'Section Style', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE
			]
		);

		$this->add_control(
			'section_title_color',
			[
				'label' => __( 'Section Title Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-fun-factor-area .section-title h2' => 'color: {{VALUE}}'
                ]
			]
		);

		$this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'section_title_typography',
                'label' => __( 'Section Title Typography', 'endless-addons' ),
                'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .ea-fun-factor-area .section-title h2'
            ]
        );

        $this->add_control(
			'section_desc_color',
			[
				'label' => __( 'Section Description Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-fun-factor-area .section-title p' => 'color: {{VALUE}}'
                ]
			]
		);

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'section_desc_typography',
                'label' => __( 'Section Description Typography', 'endless-addons' ),
                'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .ea-fun-factor-area .section-title p'
            ]
        );

		$this->end_controls_section();

		$this->start_controls_section(
			'fun_factor_style',
			[
				'label' => __( 'Fun Factor Style', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE
			]
		);

		$this->add_control(
			'fun_factor_icon_color',
			[
				'label' => __( 'Icon/Image/Number Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-fun-factor-area .ea-single-fun-factor i' => 'color: {{VALUE}}'
                ]
			]
		);

		$this->add_control(
            'fun_factor_icon_size',
            [
                'label' => __('Icon/Image/Number Size', 'endless-addons'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 20,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ea-fun-factor-area .ea-single-fun-factor i' => 'font-size: {{SIZE}}px;',
                    '{{WRAPPER}} .ea-fun-factor-area .ea-single-fun-factor img' => 'height: {{SIZE}}px; width: {{SIZE}}px;',
                ],
            ]
        );

		$this->add_control(
			'fun_factor_icon_bg_color',
			[
				'label' => __( 'Area Background Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-fun-factor-area .ea-single-fun-factor .icon' => 'background: {{VALUE}}'
                ],
                'condition' => [
                    'select_fun_factor_style' => array('style-03', 'style-06'),
                ]
			]
		);

		$this->add_control(
			'fun_factor_icon_border_color',
			[
				'label' => __( 'Area Border Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-fun-factor-area .ea-single-fun-factor .icon' => 'border-color: {{VALUE}}'
                ],
                'condition' => [
                    'select_fun_factor_style' => 'style-03',
                ]
			]
		);

		$this->add_control(
			'fun_factor_content_border_color',
			[
				'label' => __( 'Content Border Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-fun-factor-area .ea-single-fun-factor .fun-factor-content' => 'border-color: {{VALUE}}'
                ],
                'condition' => [
                    'select_fun_factor_style' => 'style-06',
                ]
			]
		);

		$this->add_control(
			'fun_factor_data_color',
			[
				'label' => __( 'Fun Factor Data Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-fun-factor-area .ea-single-fun-factor h2' => 'color: {{VALUE}}'
                ]
			]
		);

		$this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'fun_factor_data_typography',
                'label' => __( 'Fun Factor Data Typography', 'endless-addons' ),
                'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .ea-fun-factor-area .ea-single-fun-factor h2'
            ]
        );

        $this->add_control(
			'fun_factor_title_color',
			[
				'label' => __( 'Fun Factor Title Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-fun-factor-area .ea-single-fun-factor span.sub-title' => 'color: {{VALUE}}'
                ]
			]
		);

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'fun_factor_title_typography',
                'label' => __( 'Fun Factor Title Typography', 'endless-addons' ),
                'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .ea-fun-factor-area .ea-single-fun-factor span.sub-title'
            ]
        );

		$this->end_controls_section();

		$this->start_controls_section(
			'_section_overlay_style',
			[
				'label' => __('Background Overlay', 'endless-addons'),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE
			]
		);

		$this->start_controls_tabs('_tabs_overlay_style');

		$this->start_controls_tab(
			'_tab_overlay_normal',
			[
				'label' => __('Normal', 'endless-addons'),
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name'     => 'hover_overlay_normal',
				'label' => __('Background', 'endless-addons'),
				'show_label' => true,
				'types' => ['classic', 'gradient'],
				'exclude' => [
					'classic' => 'image'
				],
				'selector' => '{{WRAPPER}} .ea-fun-factor-area',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'_tab_overlay_hover',
			[
				'label' => __('Hover', 'endless-addons'),
			]
		);


		$this->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name'     => 'hover_overlay_hover',
				'label' => __('Background', 'endless-addons'),
				'show_label' => true,
				'types' => ['classic', 'gradient'],
				'exclude' => [
					'classic' => 'image'
				],
				'selector' => '{{WRAPPER}} .ea-fun-factor-area:hover',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		require plugin_dir_path( dirname( __FILE__ ) ) . 'floating/ea-funfactor-floating.php';

	}

	/**
	 * Render Fun Factor widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @since 1.0.5
	 * @access protected
	 */
	protected function render() {

		$settings = $this->get_settings_for_display();

		if( $settings['funfactor_icon_h_alignment'] == 'left' ) : 
		    $this->add_render_attribute('funfactor_icon_h_align', 'class', 'funfactor-align is-icon-left');
		elseif( $settings['funfactor_icon_h_alignment'] == 'right' ) :
            $this->add_render_attribute('funfactor_icon_h_align', 'class', 'funfactor-align is-icon-right');
        endif;

        if( $settings['funfactor_icon_v_alignment'] == 'top' ) : 
		    $this->add_render_attribute('funfactor_icon_v_align', 'class', 'funfactor-align is-icon-top');
		elseif( $settings['funfactor_icon_v_alignment'] == 'bottom' ) :
            $this->add_render_attribute('funfactor_icon_v_align', 'class', 'funfactor-align is-icon-bottom');
        endif; ?>

		<!-- Fun Factor Column Style -->
	    <?php if( $settings['fun_factor_item_column'] == 'columns-2' ) :
			$fun_factor_column = 'col-lg-6 col-md-6 col-sm-6';
		elseif( $settings['fun_factor_item_column'] == 'columns-3' ) :
			$fun_factor_column = 'col-lg-4 col-md-6 col-sm-6';
		elseif( $settings['fun_factor_item_column'] == 'columns-4' ) :
			$fun_factor_column = 'col-lg-3 col-md-6 col-sm-6';
		endif;

		if( $settings['show_fun_factor'] == 'show' ) :

			if( $settings['select_fun_factor_style'] == 'style-01' ) : ?>
				<!-- Start Fun Factor Design One Area -->
		        <section class="ea-fun-factor-area bg-style-one pb-70">
		            <div class="container">
		                <div class="ea-fun-factor-bg">
		                    <div class="section-title">
		                        <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                        <p><?php echo esc_html($settings['section_desc']); ?></p>
		                    </div>
		                    <div class="row">
		                    	<?php foreach ( $settings['single_fun_factor'] as $item ) : ?>
			                        <div class="funfactor-col <?php echo esc_attr( $fun_factor_column ); ?>">
			                        	<div <?php echo $this->get_render_attribute_string('funfactor_icon_h_align'); ?>>
				                            <div class="ea-single-fun-factor">
				                            	<?php if( $item['single_fun_factor_img_or_icon'] == 'img' ) : 
					                        	    if( ! $item['single_fun_factor_icon']['url'] == '' ) : ?>
							                            <img src="<?php echo esc_url( $item['single_fun_factor_icon']['url'] ); ?>" alt="Icon">
					                                <?php endif;
					                            elseif( $item['single_fun_factor_img_or_icon'] == 'icon' ) : ?>
					                            	<?php endad_render_icon( $item, 'icon', 'single_fun_factor_icon_fa' ); ?>
					                            <?php elseif( $item['single_fun_factor_img_or_icon'] == 'number' ) : ?>
					                            	<i><?php echo esc_html($item['single_fun_factor_number']); ?></i>
					                            <?php endif; ?>
				                                <h2>
				                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
				                                </h2>
				                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
				                            </div>
				                        </div>
			                        </div>
		                        <?php endforeach; ?>
		                    </div>
		                </div>
		            </div>
		        </section>
		        <!-- End Fun Factor Design One Area -->
		    <?php elseif( $settings['select_fun_factor_style'] == 'style-02' ) : ?>
		    	<!-- Start Fun Factor Design Two Area -->
		        <section class="ea-fun-factor-area bg-color-f0fbf7 pt-100 pb-70">
		            <div class="container">
		                <div class="ea-fun-factor-bg">
		                    <div class="section-title">
		                        <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                        <p><?php echo esc_html($settings['section_desc']); ?></p>
		                    </div>
		                    <div class="row">
		                    	<?php foreach ( $settings['single_fun_factor'] as $item ) : ?>
			                        <div class="funfactor-col <?php echo esc_attr( $fun_factor_column ); ?>">
			                            <div class="ea-single-fun-factor style-two">
			                            	<?php if($settings['funfactor_icon_v_alignment'] == 'bottom') : ?>
			                            		<div <?php echo $this->get_render_attribute_string('funfactor_icon_v_align'); ?>>
					                                <h2>
					                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
					                                </h2>
					                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
				                                </div>
			                                <?php endif; ?>
			                                <?php if( $item['single_fun_factor_img_or_icon'] == 'img' ) : 
			                        	    if( ! $item['single_fun_factor_icon']['url'] == '' ) : ?>
					                            <img src="<?php echo esc_url( $item['single_fun_factor_icon']['url'] ); ?>" alt="Icon">
			                                <?php endif;
				                            elseif( $item['single_fun_factor_img_or_icon'] == 'icon' ) : ?>
				                            	<?php endad_render_icon( $item, 'icon', 'single_fun_factor_icon_fa' ); ?>
				                            <?php elseif( $item['single_fun_factor_img_or_icon'] == 'number' ) : ?>
					                            <i><?php echo esc_html($item['single_fun_factor_number']); ?></i>
				                            <?php endif; ?>
				                            <?php if($settings['funfactor_icon_v_alignment'] == 'top') : ?>
				                            	<div <?php echo $this->get_render_attribute_string('funfactor_icon_v_align'); ?>>
					                                <h2>
					                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
					                                </h2>
					                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
					                            </div>
			                                <?php endif; ?>
			                            </div>
			                        </div>
		                        <?php endforeach; ?>
		                    </div>
		                </div>
		            </div>
		        </section>
		        <!-- End Fun Factor Design Two Area -->
		    <?php elseif( $settings['select_fun_factor_style'] == 'style-03' ) : ?>
		    	<!-- Start Fun Factor Design Three Area -->
		        <section class="ea-fun-factor-area pt-100 pb-70">
		            <div class="container">
		                <div class="ea-fun-factor-bg">
		                    <div class="section-title">
		                        <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                        <p><?php echo esc_html($settings['section_desc']); ?></p>
		                    </div>
		                    <div class="row">
		                    	<?php foreach ( $settings['single_fun_factor'] as $item ) : ?>
			                        <div class="funfactor-col <?php echo esc_attr( $fun_factor_column ); ?>">
			                            <div class="ea-single-fun-factor style-three">
			                                <?php if($settings['funfactor_icon_v_alignment'] == 'bottom') : ?>
			                            		<div <?php echo $this->get_render_attribute_string('funfactor_icon_v_align'); ?>>
					                                <h2>
					                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
					                                </h2>
					                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
				                                </div>
			                                <?php endif; ?>
			                                <?php if( $item['single_fun_factor_img_or_icon'] == 'img' ) : 
			                        	    if( ! $item['single_fun_factor_icon']['url'] == '' ) : ?>
			                        	    	<div class="icon">
						                            <img src="<?php echo esc_url( $item['single_fun_factor_icon']['url'] ); ?>" alt="Icon">
						                        </div>
			                                <?php endif;
				                            elseif( $item['single_fun_factor_img_or_icon'] == 'icon' ) : ?>
				                            	<div class="icon">
					                            	<?php endad_render_icon( $item, 'icon', 'single_fun_factor_icon_fa' ); ?>
					                            </div>
					                        <?php elseif( $item['single_fun_factor_img_or_icon'] == 'number' ) : ?>
					                        	<div class="icon">
					                                <i><?php echo esc_html($item['single_fun_factor_number']); ?></i>
					                            </div>
				                            <?php endif; ?>
				                            <?php if($settings['funfactor_icon_v_alignment'] == 'top') : ?>
				                            	<div <?php echo $this->get_render_attribute_string('funfactor_icon_v_align'); ?>>
					                                <h2>
					                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
					                                </h2>
					                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
					                            </div>
			                                <?php endif; ?>
			                            </div>
			                        </div>
		                        <?php endforeach; ?>
		                    </div>
		                </div>
		            </div>
		        </section>
		        <!-- End Fun Factor Design Three Area -->
		    <?php elseif( $settings['select_fun_factor_style'] == 'style-04' ) : ?>
		    	<!-- Start Fun Factor Design Four Area -->
		    	<?php if( $settings['section_bg_img']['url'] == '' ) : ?>
	                 <section class="ea-fun-factor-area bg-color-5251e1 pt-100 pb-70"> 
	            <?php else: ?>
	                 <section class="ea-fun-factor-area bg-color-5251e1 pt-100 pb-70">
	            <?php endif; ?>
		            <div class="container">
		                <div class="ea-fun-factor-bg">
		                    <div class="section-title white-title">
		                        <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                        <p><?php echo esc_html($settings['section_desc']); ?></p>
		                    </div>
		                    <div class="row">
		                    	<?php foreach ( $settings['single_fun_factor'] as $item ) : ?>
			                        <div class="funfactor-col <?php echo esc_attr( $fun_factor_column ); ?>">
			                            <div class="ea-single-fun-factor style-four">
			                                <?php if($settings['funfactor_icon_v_alignment'] == 'bottom') : ?>
			                            		<div <?php echo $this->get_render_attribute_string('funfactor_icon_v_align'); ?>>
					                                <h2>
					                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
					                                </h2>
					                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
				                                </div>
			                                <?php endif; ?>
			                                <?php if( $item['single_fun_factor_img_or_icon'] == 'img' ) : 
			                        	    if( ! $item['single_fun_factor_icon']['url'] == '' ) : ?>
					                            <img src="<?php echo esc_url( $item['single_fun_factor_icon']['url'] ); ?>" alt="Icon">
			                                <?php endif;
				                            elseif( $item['single_fun_factor_img_or_icon'] == 'icon' ) : ?>
				                            	<?php endad_render_icon( $item, 'icon', 'single_fun_factor_icon_fa' ); ?>
				                            <?php elseif( $item['single_fun_factor_img_or_icon'] == 'number' ) : ?>
					                            <i><?php echo esc_html($item['single_fun_factor_number']); ?></i>
				                            <?php endif; ?>
				                            <?php if($settings['funfactor_icon_v_alignment'] == 'top') : ?>
				                            	<div <?php echo $this->get_render_attribute_string('funfactor_icon_v_align'); ?>>
					                                <h2>
					                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
					                                </h2>
					                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
					                            </div>
			                                <?php endif; ?>
			                            </div>
			                        </div>
		                        <?php endforeach; ?>
		                    </div>
		                </div>
		            </div>
		        </section>
		        <!-- End Fun Factor Design Four Area -->
		    <?php elseif( $settings['select_fun_factor_style'] == 'style-05' ) : ?>
		    	<!-- Start Fun Factor Design Five Area -->
		        <section class="ea-fun-factor-area pb-70">
		            <div class="container">
		                <div class="ea-fun-factor-bg">
		                    <div class="section-title">
		                        <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                        <p><?php echo esc_html($settings['section_desc']); ?></p>
		                    </div>
		                    <div class="row">
		                    	<?php foreach ( $settings['single_fun_factor'] as $item ) : ?>
			                        <div class="funfactor-col <?php echo esc_attr( $fun_factor_column ); ?>">
			                        	<div <?php echo $this->get_render_attribute_string('funfactor_icon_h_align'); ?>>
				                            <div class="ea-single-fun-factor style-five">
				                                <?php if( $item['single_fun_factor_img_or_icon'] == 'img' ) : 
				                        	    if( ! $item['single_fun_factor_icon']['url'] == '' ) : ?>
						                            <img src="<?php echo esc_url( $item['single_fun_factor_icon']['url'] ); ?>" alt="Icon">
				                                <?php endif;
					                            elseif( $item['single_fun_factor_img_or_icon'] == 'icon' ) : ?>
					                            	<?php endad_render_icon( $item, 'icon', 'single_fun_factor_icon_fa' ); ?>
					                            <?php elseif( $item['single_fun_factor_img_or_icon'] == 'number' ) : ?>
					                                <i><?php echo esc_html($item['single_fun_factor_number']); ?></i>
					                            <?php endif; ?>
				                                <h2>
				                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
				                                </h2>
				                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
				                            </div>
				                        </div>
			                        </div>
		                        <?php endforeach; ?>
		                    </div>
		                </div>
		            </div>
		        </section>
		        <!-- End Fun Factor Design Five Area -->
		    <?php elseif( $settings['select_fun_factor_style'] == 'style-06' ) : ?>
		    	<!-- Start Fun Factor Design Six Area -->
		        <section class="ea-fun-factor-area bg-color-fffbf9 pt-100 pb-70">
		            <div class="container">
		                <div class="ea-fun-factor-bg">
		                    <div class="section-title">
		                        <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                        <p><?php echo esc_html($settings['section_desc']); ?></p>
		                    </div>
		                    <div class="row">
		                    	<?php foreach ( $settings['single_fun_factor'] as $item ) : ?>
			                        <div class="funfactor-col <?php echo esc_attr( $fun_factor_column ); ?>">
			                            <div class="ea-single-fun-factor style-six">
			                            	<?php if($settings['funfactor_icon_v_alignment'] == 'bottom') : ?>
			                            		<div <?php echo $this->get_render_attribute_string('funfactor_icon_v_align'); ?>>
			                            			<div class="fun-factor-content">
						                                <h2>
						                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
						                                </h2>
						                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
						                            </div>
				                                </div>
			                                <?php endif; ?>
			                                <?php if( $item['single_fun_factor_img_or_icon'] == 'img' ) : 
			                        	    if( ! $item['single_fun_factor_icon']['url'] == '' ) : ?>
			                        	    	<div class="icon">
						                            <img src="<?php echo esc_url( $item['single_fun_factor_icon']['url'] ); ?>" alt="Icon">
						                        </div>
			                                <?php endif;
				                            elseif( $item['single_fun_factor_img_or_icon'] == 'icon' ) : ?>
				                            	<div class="icon">
				                            	    <?php endad_render_icon( $item, 'icon', 'single_fun_factor_icon_fa' ); ?>
				                                </div>
				                            <?php elseif( $item['single_fun_factor_img_or_icon'] == 'number' ) : ?>
				                            	<div class="icon">
					                                <i><?php echo esc_html($item['single_fun_factor_number']); ?></i>
					                            </div>
				                            <?php endif; ?>
				                            <?php if($settings['funfactor_icon_v_alignment'] == 'top') : ?>
				                            	<div <?php echo $this->get_render_attribute_string('funfactor_icon_v_align'); ?>>
					                                <div class="fun-factor-content">
						                                <h2>
						                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
						                                </h2>
						                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
						                            </div>
					                            </div>
			                                <?php endif; ?>
			                            </div>
			                        </div>
		                        <?php endforeach; ?>
		                    </div>
		                </div>
		            </div>
		        </section>
		        <!-- End Fun Factor Design Six Area -->
		    <?php elseif( $settings['select_fun_factor_style'] == 'style-07' ) : ?>
		    	<!-- Start Fun Factor Design Seven Area -->
		        <section class="ea-fun-factor-area pt-100 pb-70">
		            <div class="container">
		                <div class="ea-fun-factor-bg">
		                    <div class="section-title">
		                        <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                        <p><?php echo esc_html($settings['section_desc']); ?></p>
		                    </div>
		                    <div class="row">
		                    	<?php foreach ( $settings['single_fun_factor'] as $item ) : ?>
			                        <div class="funfactor-col <?php echo esc_attr( $fun_factor_column ); ?>">
			                            <div class="ea-single-fun-factor style-seven">
			                                <?php if($settings['funfactor_icon_v_alignment'] == 'bottom') : ?>
			                            		<div <?php echo $this->get_render_attribute_string('funfactor_icon_v_align'); ?>>
			                            			<div class="fun-factor-content">
						                                <h2>
						                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
						                                </h2>
						                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
						                            </div>
				                                </div>
			                                <?php endif; ?>
			                                <?php if( $item['single_fun_factor_img_or_icon'] == 'img' ) : 
			                        	    if( ! $item['single_fun_factor_icon']['url'] == '' ) : ?>
						                        <img src="<?php echo esc_url( $item['single_fun_factor_icon']['url'] ); ?>" alt="Icon">
			                                <?php endif;
				                            elseif( $item['single_fun_factor_img_or_icon'] == 'icon' ) : ?>
				                            	<?php endad_render_icon( $item, 'icon', 'single_fun_factor_icon_fa' ); ?>
				                            <?php elseif( $item['single_fun_factor_img_or_icon'] == 'number' ) : ?>
					                            <i><?php echo esc_html($item['single_fun_factor_number']); ?></i>
				                            <?php endif; ?>
				                            <?php if($settings['funfactor_icon_v_alignment'] == 'top') : ?>
				                            	<div <?php echo $this->get_render_attribute_string('funfactor_icon_v_align'); ?>>
					                                <div class="fun-factor-content">
						                                <h2>
						                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
						                                </h2>
						                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
						                            </div>
					                            </div>
			                                <?php endif; ?>
			                            </div>
			                        </div>
		                        <?php endforeach; ?>
		                    </div>
		                </div>
		            </div>
		        </section>
		        <!-- End Fun Factor Design Seven Area -->
		    <?php elseif( $settings['select_fun_factor_style'] == 'style-08' ) : ?>
		    	<!-- Start Fun Factor Design Eight Area -->
		        <section class="ea-fun-factor-area bg-color-f0f0f9 pt-100 pb-70">
		            <div class="container">
		                <div class="ea-fun-factor-bg">
		                    <div class="section-title">
		                        <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                        <p><?php echo esc_html($settings['section_desc']); ?></p>
		                    </div>
		                    <div class="row align-items-center">
		                        <div class="col-lg-6">
		                            <div class="ea-mb-30">
		                                <?php if( ! $settings['fun_factor_featured_img']['url'] == '' ) : ?>
		                                	<div class="icon ea-elementor-floating">
		                                		<?php echo \Elementor\Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'fun_factor_featured_img' ); ?>
			                                </div>
		                                <?php endif; ?>
		                            </div>
		                        </div>
		                        <div class="col-lg-6">
				                    <div class="row">
				                    	<?php foreach ( $settings['single_fun_factor'] as $item ) : ?>
					                        <div class="funfactor-col <?php echo esc_attr( $fun_factor_column ); ?>">
					                            <div class="ea-single-fun-factor style-eight">
					                                <?php if($settings['funfactor_icon_v_alignment'] == 'bottom') : ?>
					                            		<div <?php echo $this->get_render_attribute_string('funfactor_icon_v_align'); ?>>
					                            			<div class="fun-factor-content">
								                                <h2>
								                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
								                                </h2>
								                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
								                            </div>
						                                </div>
					                                <?php endif; ?>
					                                <?php if( $item['single_fun_factor_img_or_icon'] == 'img' ) : 
					                        	    if( ! $item['single_fun_factor_icon']['url'] == '' ) : ?>
					                        	    	<div class="icon">
								                            <img src="<?php echo esc_url( $item['single_fun_factor_icon']['url'] ); ?>" alt="Icon">
								                        </div>
					                                <?php endif;
						                            elseif( $item['single_fun_factor_img_or_icon'] == 'icon' ) : ?>
						                            	<div class="icon">
						                            	    <?php endad_render_icon( $item, 'icon', 'single_fun_factor_icon_fa' ); ?>
						                                </div>
						                            <?php elseif( $item['single_fun_factor_img_or_icon'] == 'number' ) : ?>
						                            	<div class="icon">
					                                        <i><?php echo esc_html($item['single_fun_factor_number']); ?></i>
					                                    </div>
						                            <?php endif; ?>
						                            <?php if($settings['funfactor_icon_v_alignment'] == 'top') : ?>
						                            	<div <?php echo $this->get_render_attribute_string('funfactor_icon_v_align'); ?>>
							                                <div class="fun-factor-content">
								                                <h2>
								                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
								                                </h2>
								                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
								                            </div>
							                            </div>
					                                <?php endif; ?>
					                            </div>
					                        </div>
				                        <?php endforeach; ?>
				                    </div>
			                    </div>
			                </div>
		                </div>
		            </div>
		        </section>
		        <!-- End Fun Factor Design Eight Area -->
		    <?php elseif( $settings['select_fun_factor_style'] == 'style-09' ) : ?>
		    	<!-- Start Fun Factor Design Nine Area -->
		        <section class="ea-fun-factor-area style-nine bg-shape pt-100">
		            <div class="container">
		                <div class="ea-fun-factor-bg">
		                    <div class="section-title">
		                        <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                        <p><?php echo esc_html($settings['section_desc']); ?></p>
		                    </div>
		                    <div class="row">
		                    	<?php foreach ( $settings['single_fun_factor'] as $item ) : ?>
			                        <div class="funfactor-col <?php echo esc_attr( $fun_factor_column ); ?>">
			                        	<div <?php echo $this->get_render_attribute_string('funfactor_icon_h_align'); ?>>
				                            <div class="ea-single-fun-factor style-nine">
				                                <?php if( $item['single_fun_factor_img_or_icon'] == 'img' ) : 
				                        	    if( ! $item['single_fun_factor_icon']['url'] == '' ) : ?>
				                        	    	<div class="icon">
							                            <img src="<?php echo esc_url( $item['single_fun_factor_icon']['url'] ); ?>" alt="Icon">
							                        </div>
				                                <?php endif;
					                            elseif( $item['single_fun_factor_img_or_icon'] == 'icon' ) : ?>
					                            	<div class="icon">
					                            	    <?php endad_render_icon( $item, 'icon', 'single_fun_factor_icon_fa' ); ?>
					                                </div>
					                            <?php elseif( $item['single_fun_factor_img_or_icon'] == 'number' ) : ?>
					                            	<div class="icon">
				                                        <i><?php echo esc_html($item['single_fun_factor_number']); ?></i>
				                                    </div>
					                            <?php endif; ?>
				                                <h2>
				                                    <span class="odometer" data-count="<?php echo esc_html($item['single_fun_factor_data']); ?>">00</span> 
				                                </h2>
				                                <span class="sub-title"><?php echo esc_html($item['single_fun_factor_title']); ?></span>
				                            </div>
				                        </div>
			                        </div>
		                        <?php endforeach; ?>
		                    </div>
		                </div>
		            </div>
		        </section>
		        <!-- End Fun Factor Design Nine Area -->
            <?php endif;

        endif;

    }

}
