<?php
namespace Elementor;

/**
 * Elementor Widget
 * @package Feron
 * @since 1.0.0
 */ 
 
class About_With_Games extends Widget_Base {

	/**
	 * Get widget name.
	 * Retrieve button widget name.
	 *
	 * @since  1.0.0
	 * @access public
	 * @return string Widget name.
	 */
	public function get_name() {
		return 'feron-about-with-games-widget';
	}

	/**
	 * Get widget title.
	 * Retrieve button widget title.
	 *
	 * @since  1.0.0
	 * @access public
	 * @return string Widget title.
	 */
	public function get_title() {
		return esc_html__( 'About with games', 'feron-core' );
	}

	/**
	 * Get widget icon.
	 * Retrieve button widget icon.
	 *
	 * @since  1.0.0
	 * @access public
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return 'eicon-flash';
	}

	/**
	 * Get widget categories.
	 * Retrieve the list of categories the button widget belongs to.
	 * Used to determine where to display the widget in the editor.
	 *
	 * @since  2.0.0
	 * @access public
	 * @return array Widget categories.
	 */
	public function get_categories()
    {
        return ['feron_widgets'];
    }
	
	/**
	 * Register button widget controls.
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @since  1.0.0
	 * @access protected
	 */
	protected function register_controls() {


		// Tab Start - 1

		$this->start_controls_section(
			'section_image',
			[
				'label' => esc_html__( 'Section Image', 'feron-core' ),
			]
		);

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

		$this->add_control(
			'image2',
				[
					'label' => __( 'Image 2', 'feron-core' ),
					'type' => Controls_Manager::MEDIA,
					'default' => ['url' => Utils::get_placeholder_image_src(),],
				]
		);	

		$this->add_control(
			'image3',
				[
					'label' => __( 'Image 3', 'feron-core' ),
					'type' => Controls_Manager::MEDIA,
					'default' => ['url' => Utils::get_placeholder_image_src(),],
				]
		);		

		$this->add_control(
			'image4',
				[
					'label' => __( 'Image 4', 'feron-core' ),
					'type' => Controls_Manager::MEDIA,
					'default' => ['url' => Utils::get_placeholder_image_src(),],
				]
		);			
		
		$this->add_control(
			'image5',
				[
					'label' => __( 'Image 5', 'feron-core' ),
					'type' => Controls_Manager::MEDIA,
					'default' => ['url' => Utils::get_placeholder_image_src(),],
				]
		);

		$this->add_control(
			'image6',
				[
					'label' => __( 'Image 6', 'feron-core' ),
					'type' => Controls_Manager::MEDIA,
					'default' => ['url' => Utils::get_placeholder_image_src(),],
				]
		);

		$this->add_control(
			'image7',
				[
					'label' => __( 'Image 7', 'feron-core' ),
					'type' => Controls_Manager::MEDIA,
					'default' => ['url' => Utils::get_placeholder_image_src(),],
				]
		);

		$this->add_control(
			'image8',
				[
					'label' => __( 'Image 8', 'feron-core' ),
					'type' => Controls_Manager::MEDIA,
					'default' => ['url' => Utils::get_placeholder_image_src(),],
				]
		);

		$this->add_control(
			'image9',
				[
					'label' => __( 'Image 9', 'feron-core' ),
					'type' => Controls_Manager::MEDIA,
					'default' => ['url' => Utils::get_placeholder_image_src(),],
				]
		);


		$this->end_controls_section();

		// Tab Start - 2

		$this->start_controls_section(
			'section_content',
			[
				'label' => esc_html__( 'Section Content', 'feron-core' ),
			]
		);
		$this->add_control(
			'subtitle',
			[
				'label' => esc_html__( 'Subtitle', 'feron-core' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'About Us', 'feron-core' ),
				'label_block' => true,
			]
		);
		
		$this->add_control(
			'title',
			[
				'label' => esc_html__( 'Title', 'feron-core' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'We Are The Best Gaming Company', 'feron-core' ),
				'label_block' => true,
			]
		);

		$this->add_control(
			'text',
			[
				'label' => esc_html__( 'Text', 'feron-core' ),
				'type' => Controls_Manager::TEXTAREA,
				'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.', 'feron-core' ),
				'show_label' => false,
			]
		);

		$this->add_control(
			'button',
			[
				'label' => esc_html__( 'Button', 'feron-core' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'About Us', 'feron-core' ),
				'label_block' => true,
			]
		);

		$this->add_control(
			'button_link',
			[
				'label' => esc_html__( 'Button Link', 'feron-core' ),
				'type' => Controls_Manager::URL,
				'default' => [
					'url' => '#',
				],
				'show_label' => false,
			]
		);

		$this->add_control(
			'button_text',
			[
				'label' => esc_html__( 'Button Text', 'feron-core' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'Play Video', 'feron-core' ),
				'label_block' => true,
			]
		);

		$this->add_control(
			'button_link2',
			[
				'label' => esc_html__( 'Button Link 2', 'feron-core' ),
				'type' => Controls_Manager::URL,
				'default' => [
					'url' => '#',
				],
				'show_label' => false,
			]
		);

		$this->add_control(
			'subtitle2',
			[
				'label' => esc_html__( 'Subtitle 2', 'feron-core' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'Popular Games', 'feron-core' ),
				'label_block' => true,
			]
		);

		$this->add_control(
			'title2',
			[
				'label' => esc_html__( 'Title 2', 'feron-core' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'Our Popular Games', 'feron-core' ),
				'label_block' => true,
			]
		);

		$this->add_control(
			'button_link3',
			[
				'label' => esc_html__( 'Button Link 3', 'feron-core' ),
				'type' => Controls_Manager::URL,
				'default' => [
					'url' => '#',
				],
				'show_label' => false,
			]
		);

		$this->end_controls_section();

		// Tab Start - 3

		$this->start_controls_section(
			'repeatable_section',
			[
				'label' => esc_html__( 'Repeatable Section', 'feron-core' ),
			]
		);

		$repeater = new \Elementor\Repeater();

		$repeater->add_control(
			'section_image',
			[
				'label' => __( 'Section Image', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::MEDIA,
				'default' => ['url' => \Elementor\Utils::get_placeholder_image_src()],
			]
		);

		$repeater->add_control(
			'section_image2',
			[
				'label' => __( 'Section Image 2', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::MEDIA,
				'default' => ['url' => \Elementor\Utils::get_placeholder_image_src()],
			]
		);

		$repeater->add_control(
			'section_subtitle',
			[
				'label' => esc_html__( 'Section Subtitle', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'default' => esc_html__( 'Action', 'feron-core' ),
				'label_block' => true,
			]
		);

		$repeater->add_control(
			'section_image3',
			[
				'label' => __( 'Section Image 3', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::MEDIA,
				'default' => ['url' => \Elementor\Utils::get_placeholder_image_src()],
			]
		);

		$repeater->add_control(
			'section_subtitle2',
			[
				'label' => esc_html__( 'Section Subtitle 2', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'default' => esc_html__( 'Adventure', 'feron-core' ),
				'label_block' => true,
			]
		);

		$repeater->add_control(
			'section_title',
			[
				'label' => esc_html__( 'Section Title', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'default' => esc_html__( 'Game Title Here', 'feron-core' ),
				'label_block' => true,
			]
		);

		$repeater->add_control(
			'section_button_link',
			[
				'label' => esc_html__( 'Section Button Link', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::URL,
				'default' => [
					'url' => '#',
				],
				'show_label' => false,
			]
		);

		$this->add_control(
			'repeat',
			[
				'label' => esc_html__( 'Repeatable Items', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'section_title' => esc_html__( 'Game Title Here', 'feron-core' ),
					],
				],
				'title_field' => '{{{ section_title }}}',
			]
		);

		$this->end_controls_section();



				// ===== Tab Start - 4: Section Sub Title Settings =====

		$this->start_controls_section(
			'section_subtitle_settings',
			[
				'label' => __( 'Section Sub Title Setting', 'feron-core' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'show_section_subtitle',
			[
				'label'   => esc_html__( 'Show Section Sub Title', 'feron-core' ),
				'type'    => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'show' => [
						'title' => esc_html__( 'Show', 'feron-core' ),
						'icon'  => 'eicon-check-circle',
					],
					'none' => [
						'title' => esc_html__( 'Hide', 'feron-core' ),
						'icon'  => 'eicon-close-circle',
					],
				],
				'default'   => 'show',
				'selectors' => [
					'{{WRAPPER}} .section-title h6' => 'display: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'section_subtitle_alignment',
			[
				'label'     => esc_html__( 'Alignment', 'feron-core' ),
				'type'      => \Elementor\Controls_Manager::CHOOSE,
				'options'   => [
					'left' => [
						'title' => esc_html__( 'Left', 'feron-core' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'feron-core' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__( 'Right', 'feron-core' ),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'toggle'    => true,
				'condition' => [ 'show_section_subtitle' => 'show' ],
				'selectors' => [
					'{{WRAPPER}} .section-title h6' => 'text-align: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'section_subtitle_margin',
			[
				'label'      => __( 'Margin', 'feron-core' ),
				'type'       => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'condition'  => [ 'show_section_subtitle' => 'show' ],
				'selectors'  => [
					'{{WRAPPER}} .section-title h6' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important',
				],
			]
		);

		$this->add_control(
			'section_subtitle_padding',
			[
				'label'      => __( 'Padding', 'feron-core' ),
				'type'       => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'condition'  => [ 'show_section_subtitle' => 'show' ],
				'selectors'  => [
					'{{WRAPPER}} .section-title h6' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important',
				],
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name'      => 'section_subtitle_typography',
				'label'     => __( 'Typography', 'feron-core' ),
				'selector'  => '{{WRAPPER}} .section-title h6',
				'condition' => [ 'show_section_subtitle' => 'show' ],
			]
		);

		$this->add_control(
			'section_subtitle_color',
			[
				'label'     => __( 'Color', 'feron-core' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'separator' => 'after',
				'condition' => [ 'show_section_subtitle' => 'show' ],
				'selectors' => [
					'{{WRAPPER}} .section-title h6' => 'color: {{VALUE}} !important',
				],
			]
		);

		$this->end_controls_section();

		// ===== End Tab - 4: Section Sub Title Settings =====


				// Section Title ==================
		$this->start_controls_section(
			'section_title_settings',
			[
				'label' => __( 'Section Title Setting', 'feron-core' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'show_section_title',
			[
				'label'   => esc_html__( 'Show Section Title', 'feron-core' ),
				'type'    => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'show' => [
						'title' => esc_html__( 'Show', 'feron-core' ),
						'icon'  => 'eicon-check-circle',
					],
					'none' => [
						'title' => esc_html__( 'Hide', 'feron-core' ),
						'icon'  => 'eicon-close-circle',
					],
				],
				'default'   => 'show',
				'selectors' => [
					'{{WRAPPER}} .section-title h2' => 'display: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'section_title_alignment',
			[
				'label'     => esc_html__( 'Alignment', 'feron-core' ),
				'type'      => \Elementor\Controls_Manager::CHOOSE,
				'options'   => [
					'left' => [
						'title' => esc_html__( 'Left', 'feron-core' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'feron-core' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__( 'Right', 'feron-core' ),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'toggle'    => true,
				'condition' => [ 'show_section_title' => 'show' ],
				'selectors' => [
					'{{WRAPPER}} .section-title h2' => 'text-align: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'section_title_margin',
			[
				'label'      => __( 'Margin', 'feron-core' ),
				'type'       => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'condition'  => [ 'show_section_title' => 'show' ],
				'selectors'  => [
					'{{WRAPPER}} .section-title h2' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important',
				],
			]
		);

		$this->add_control(
			'section_title_padding',
			[
				'label'      => __( 'Padding', 'feron-core' ),
				'type'       => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'condition'  => [ 'show_section_title' => 'show' ],
				'selectors'  => [
					'{{WRAPPER}} .section-title h2' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important',
				],
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name'      => 'section_title_typography',
				'label'     => __( 'Typography', 'feron-core' ),
				'selector'  => '{{WRAPPER}} .section-title h2',
				'condition' => [ 'show_section_title' => 'show' ],
			]
		);

		$this->add_control(
			'section_title_color',
			[
				'label'     => __( 'Color', 'feron-core' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'condition' => [ 'show_section_title' => 'show' ],
				'selectors' => [
					'{{WRAPPER}} .section-title h2' => 'color: {{VALUE}} !important',
				],
			]
		);

		$this->end_controls_section();
		// End of Title ==================

		//Section Title Text==========================
		$this->start_controls_section(
			'section_title_text_settings',
			array(
				'label' => __( 'Section Title Text Setting', 'feron-core' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);
		
		$this->add_control(
			'show_section_title_text',
			array(
				'label' => esc_html__( 'Show Section Title Text', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'show' => [
						'show' => esc_html__( 'Show', 'feron-core' ),	
						'icon' => 'eicon-check-circle',
					],
					'none' => [
						'none' => esc_html__( 'Hide', 'feron-core' ),
						'icon' => 'eicon-close-circle',
					],
				],
				'default' => 'show',
				'selectors' => array(
					'{{WRAPPER}} .about-wrapper .about-content .about-text' => 'display: {{VALUE}} !important',
				), 
			)
		);
		
		$this->add_control(
			'section_title_text_alingment',
			array(
				'label' => esc_html__( 'Section Title Text Alignment', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => esc_html__( 'Left', 'feron-core' ),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'feron-core' ),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__( 'Right', 'feron-core' ),
						'icon' => 'eicon-text-align-right',
					],
				],
				'default' => 'left',
				'condition'    => array( 'show_section_title_text' => 'show' ),
				'toggle' => true,
				'selectors' => array(
					'{{WRAPPER}} .about-wrapper .about-content .about-text' => 'text-align: {{VALUE}} !important',
				),
			)
		);
		
		$this->add_control(
			'section_title_text_margin',
			array(
				'label'     => __( 'Section Text Margin', 'feron-core' ),
				'type'      => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' =>  ['px', '%', 'em' ],
				'condition'    => array( 'show_section_title_text' => 'show' ),
				'selectors' => array(
					'{{WRAPPER}} .about-wrapper .about-content .about-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important',
				),
			)
		); 
		
		$this->add_control(
			'section_title_text_padding',
			array(
				'label'     => __( 'Section Text Padding', 'feron-core' ),
				'type'      => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' =>  ['px', '%', 'em' ],
				'condition'    => array( 'show_section_title_text' => 'show' ),
				'selectors' => array(
					'{{WRAPPER}} .about-wrapper .about-content .about-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important',
				),
			)
		);
		
		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			array(
				'name'     => 'section_title_text_typography',
				'condition'    => array( 'show_section_title_text' => 'show' ),
				'label'    => __( 'Typography', 'feron-core' ),
				'selector' => '{{WRAPPER}} .about-wrapper .about-content .about-text',
			)
		);
		
		$this->add_control(
			'section_title_text_color',
			array(
				'label'     => __( 'Section Text Color', 'feron-core' ),
				'condition'    => array( 'show_section_title_text' => 'show' ),
				'separator' => 'after',
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .about-wrapper .about-content .about-text' => 'color: {{VALUE}} !important',
				),
			)
		);

		$this->end_controls_section();
		//End of Section Title Text=========	


		//========== Button with Background ===================================
		$this->start_controls_section(
			'button_control',
			array(
				'label' => __( 'Button Settings', 'feron-core' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);
		
		$this->add_control(
			'show_button',
			array(
				'label' => esc_html__( 'Show Button', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'show' => [
						'show' => esc_html__( 'Show', 'feron-core' ),	
						'icon' => 'eicon-check-circle',
					],
					'none' => [
						'none' => esc_html__( 'Hide', 'feron-core' ),
						'icon' => 'eicon-close-circle',
					],
				],
				'default' => 'show',
				'selectors' => array(
					'{{WRAPPER}} .theme-btn' => 'display: {{VALUE}} !important',
				), 
			)
		);		
		$this->add_control(
			'button_alingment',
			array(
				'label' => esc_html__( 'Alignment', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'condition'    => array( 'show_button' => 'show' ),
				'options' => [
					'left' => [
						'title' => esc_html__( 'Left', 'feron-core' ),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'feron-core' ),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__( 'Right', 'feron-core' ),
						'icon' => 'eicon-text-align-right',
					],
				],
				'default' => 'left',
				'toggle' => true,
				'selectors' => array(
					'{{WRAPPER}} .theme-btn' => 'text-align: {{VALUE}} !important',
				),
			)
		);	
		$this->add_control(
			'button_color',
			array(
				'label'     => __( 'Button Color', 'feron-core' ),
				'condition'    => array( 'show_button' => 'show' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .theme-btn' => 'color: {{VALUE}} !important',

				),
			)
		);

		$this->add_control(
			'button_bg_color',
			array(
				'label'     => __( 'Button Background Color', 'feron-core' ),
				'condition'    => array( 'show_button' => 'show' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .theme-btn' => 'background: {{VALUE}} !important',

				),
			)
		);

		$this->add_control(
			'button_hover_color',
			array(
				'label'     => __( 'Button Hover Color', 'feron-core' ),
				'condition'    => array( 'show_button' => 'show' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .theme-btn:hover' => 'color: {{VALUE}} !important',

				),
			)
		);
		
		
		$this->add_control(
			'button_bg_hover_color',
			array(
				'label'     => __( 'Button Background Hover Color', 'feron-core' ),
				'condition'    => array( 'show_button' => 'show' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .theme-btn:hover' => 'background: {{VALUE}} !important',

				),
			)
		);
		
		$this->add_control(
			'button_padding',
			array(
				'label'     => __( 'Padding', 'feron-core' ),
				'type'      => \Elementor\Controls_Manager::DIMENSIONS,
				'condition'    => array( 'show_button' => 'show' ),
				'size_units' =>  ['px', '%', 'em' ],
			
				'selectors' => array(
					'{{WRAPPER}} .theme-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important',
				),
			)
		);

		$this->add_control(
			'button_margin',
			array(
				'label'     => __( 'Margin', 'feron-core' ),
				'type'      => \Elementor\Controls_Manager::DIMENSIONS,
				'condition'    => array( 'show_button' => 'show' ),
				'size_units' =>  ['px', '%', 'em' ],
				'selectors' => array(
					'{{WRAPPER}} .theme-btn' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important',
				),
			)
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			array(
				'name'     => 'button_typography',
				'condition'    => array( 'show_button' => 'show' ),
				'label'    => __( 'Typography', 'feron-core' ),
				'selector' => '{{WRAPPER}} .theme-btn',
			)
		);
		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			array(
				'name' => 'border',
				'condition'    => array( 'show_button' => 'show' ),
				'selector' => '{{WRAPPER}} .theme-btn',
			)
		);
		
		$this->add_control(
			'border_radius',
			array(
				'label'     => __( 'Border Radius', 'feron-core' ),
				'type'      => \Elementor\Controls_Manager::DIMENSIONS,
				'condition'    => array( 'show_button' => 'show' ),
				'size_units' =>  ['px', '%', 'em' ],
			
				'selectors' => array(
					'{{WRAPPER}} .theme-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important',
				),
			)
		);

		$this->end_controls_section();
		
		//End of Button		
	

				
	//========== Button Two with Background ===================================


$this->start_controls_section(
			'two_button_control',
			array(
				'label' => __( 'Button Two Settings', 'feron-core' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);
		
$this->add_control(
			'show_two_button',
			array(
				'label' => esc_html__( 'Show Button', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'show' => [
						'show' => esc_html__( 'Show', 'feron-core' ),	
						'icon' => 'eicon-check-circle',
					],
					'none' => [
						'none' => esc_html__( 'Hide', 'feron-core' ),
						'icon' => 'eicon-close-circle',
					],
				],
				'default' => 'show',
				'selectors' => array(
					'{{WRAPPER}} .view-btn' => 'display: {{VALUE}} !important',
				),
			)
		);		
$this->add_control(
			'two_button_alingment',
			array(
				'label' => esc_html__( 'Alignment', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'condition'    => array( 'show_two_button' => 'show' ),
				'options' => [
					'left' => [
						'title' => esc_html__( 'Left', 'feron-core' ),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'feron-core' ),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__( 'Right', 'feron-core' ),
						'icon' => 'eicon-text-align-right',
					],
				],
				'default' => 'center',
				'toggle' => true,
				'selectors' => array(
					'{{WRAPPER}} .main-slider .content .btns-box' => 'text-align: {{VALUE}} !important',
				),
			)
		);	
$this->add_control(
			'two_button_color',
			array(
				'label'     => __( 'Button Color', 'feron-core' ),
				'condition'    => array( 'show_two_button' => 'show' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .view-btn' => 'color: {{VALUE}} !important',

				),
			)
		);
$this->add_control(
			'two_button_bg_color',
			array(
				'label'     => __( 'Background Color', 'feron-core' ),
				'condition'    => array( 'show_two_button' => 'show' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .view-btn:after' => 'background: {{VALUE}} !important',
				),
			)
		);	
$this->add_control(
			'two_button_hover_color',
			array(
				'label'     => __( 'Hover Color', 'feron-core' ),
				'condition'    => array( 'show_two_button' => 'show' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .view-btn:before' => 'background: {{VALUE}} !important',
				),
			)
		);				
	$this->add_control(
			'two_button_padding',
			array(
				'label'     => __( 'Padding', 'feron-core' ),
				'type'      => \Elementor\Controls_Manager::DIMENSIONS,
				'condition'    => array( 'show_two_button' => 'show' ),
				'size_units' =>  ['px', '%', 'em' ],
			
				'selectors' => array(
					'{{WRAPPER}} .view-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important',
				),
			)
		);

	$this->add_control(
			'two_button_margin',
			array(
				'label'     => __( 'Margin', 'feron-core' ),
				'type'      => \Elementor\Controls_Manager::DIMENSIONS,
				'condition'    => array( 'show_two_button' => 'show' ),
				'size_units' =>  ['px', '%', 'em' ],
				'selectors' => array(
					'{{WRAPPER}} .view-btn' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important',
				),
			)
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			array(
				'name'     => 'two_button_typography',
				'condition'    => array( 'show_two_button' => 'show' ),
				'label'    => __( 'Typography', 'feron-core' ),
				'selector' => '{{WRAPPER}} .view-btn',
			)
		);
		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			array(
				'name' => 'two_border',
				'condition'    => array( 'show_two_button' => 'show' ),
				'selector' => '{{WRAPPER}} .view-btn',
			)
		);
		$this->add_control(
			'two_border_radius',
			array(
				'label' => esc_html__( 'Border Radius', 'feron-core' ),
				'type' => \Elementor\Controls_Manager::SLIDER,
				'condition'    => array( 'show_two_button' => 'show' ),
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 1000,
						'step' => 5,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => '%',
					'size' => 50,
				],
				'selectors' => [
					'{{WRAPPER}} .view-btn' => 'border-radius: {{SIZE}}{{UNIT}};',
				],
			)
		);

		$this->end_controls_section();
		
		//End of Button									
		
				// ===== Tab Start - 5: Title Settings =====

		$this->start_controls_section(
			'title_settings',
			[
				'label' => __( 'Title Setting', 'feron-core' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'show_title',
			[
				'label'   => esc_html__( 'Show Title', 'feron-core' ),
				'type'    => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'show' => [
						'title' => esc_html__( 'Show', 'feron-core' ),
						'icon'  => 'eicon-check-circle',
					],
					'none' => [
						'title' => esc_html__( 'Hide', 'feron-core' ),
						'icon'  => 'eicon-close-circle',
					],
				],
				'default'   => 'show',
				'selectors' => [
					'{{WRAPPER}} .game-wrapper .game-image-items .game-content h3 a' => 'display: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'title_alignment',
			[
				'label'     => esc_html__( 'Alignment', 'feron-core' ),
				'type'      => \Elementor\Controls_Manager::CHOOSE,
				'options'   => [
					'left' => [
						'title' => esc_html__( 'Left', 'feron-core' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'feron-core' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__( 'Right', 'feron-core' ),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'toggle'    => true,
				'condition' => [ 'show_title' => 'show' ],
				'selectors' => [
					'{{WRAPPER}} .game-wrapper .game-image-items .game-content h3 a' => 'text-align: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'title_margin',
			[
				'label'      => __( 'Margin', 'feron-core' ),
				'type'       => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'condition'  => [ 'show_title' => 'show' ],
				'selectors'  => [
					'{{WRAPPER}} .game-wrapper .game-image-items .game-content h3 a' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important',
				],
			]
		);

		$this->add_control(
			'title_padding',
			[
				'label'      => __( 'Padding', 'feron-core' ),
				'type'       => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'condition'  => [ 'show_title' => 'show' ],
				'selectors'  => [
					'{{WRAPPER}} .game-wrapper .game-image-items .game-content h3 a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important',
				],
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name'      => 'title_typography',
				'label'     => __( 'Typography', 'feron-core' ),
				'selector'  => '{{WRAPPER}} .game-wrapper .game-image-items .game-content h3 a',
				'condition' => [ 'show_title' => 'show' ],
			]
		);

		$this->add_control(
			'title_color',
			[
				'label'     => __( 'Color', 'feron-core' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'condition' => [ 'show_title' => 'show' ],
				'selectors' => [
					'{{WRAPPER}} .game-wrapper .game-image-items .game-content h3 a' => 'color: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'title_hover_color',
			[
				'label'     => __( 'Hover Color', 'feron-core' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'condition' => [ 'show_title' => 'show' ],
				'selectors' => [
					'{{WRAPPER}} .game-wrapper .game-image-items .game-content h3 a:hover' => 'color: {{VALUE}} !important',
				],
			]
		);

		$this->end_controls_section();

		// ===== End Tab - 5: Title Settings =====

		


	
		}

	/**
	 * Render button widget output on the frontend.
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @since  1.0.0
	 * @access protected
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();
		$allowed_tags = wp_kses_allowed_html('post');
		?>

		  <section class="about-section section-padding fix pt-0-1199">
            <div class="left-shape">
                <?php  if ( !empty(esc_url($settings['image']['id']) )) : ?>   
					<img src="<?php echo wp_get_attachment_url($settings['image']['id']);?>" alt=""/>
				<?php endif;?>
            </div>
            <div class="container">
                <div class="about-wrapper">
                    <div class="row g-4">
                        <div class="col-lg-6">
                            <div class="superhero-image">
								<?php  if ( !empty(esc_url($settings['image2']['id']) )) : ?>   
									<img class="wow fadeInRight" data-wow-delay=".3s" src="<?php echo wp_get_attachment_url($settings['image2']['id']);?>" alt=""/>
								<?php endif;?>
                                <span class="eplay-text">
                                    <?php  if ( !empty(esc_url($settings['image3']['id']) )) : ?>   
										<img src="<?php echo wp_get_attachment_url($settings['image3']['id']);?>" alt=""/>
									<?php endif;?>
                                </span>
                                <div class="radius-shape1 float-bob-y">
                                    <?php  if ( !empty(esc_url($settings['image4']['id']) )) : ?>   
										<img src="<?php echo wp_get_attachment_url($settings['image4']['id']);?>" alt=""/>
									<?php endif;?>
                                </div>
                                 <div class="radius-shape2 float-bob-y">
                                    <?php  if ( !empty(esc_url($settings['image5']['id']) )) : ?>   
										<img src="<?php echo wp_get_attachment_url($settings['image5']['id']);?>" alt=""/>
									<?php endif;?>
                                </div>
                                <div class="game-controller-image float-bob-x">
                                   <?php  if ( !empty(esc_url($settings['image6']['id']) )) : ?>   
										<img src="<?php echo wp_get_attachment_url($settings['image6']['id']);?>" alt=""/>
									<?php endif;?>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="about-content">
                                <div class="section-title mb-0">
                                    <h6 class="wow fadeInUp"><?php echo $settings['subtitle'];?></h6>
                                    <h2 class="wow fadeInUp" data-wow-delay=".3s">
                                        <?php echo $settings['title'];?>
                                    </h2>
                                </div>
                                <p class="about-text wow fadeInUp" data-wow-delay=".5s">
                                    <?php echo $settings['text'];?>
                                </p>
                                <div class="about-btn">
                                    <a href="<?php echo esc_url($settings['button_link']['url']);?>" class="theme-btn wow fadeInUp" data-wow-delay=".3s"><?php echo $settings['button'];?></a>   

									<?php
									$btn_text = $settings['button_text'] ?? '';
									$btn_url  = $settings['button_link2']['url'] ?? '';

									if ( $btn_text ) {
										// Prepare link attributes
										$this->add_render_attribute( 'button2_attr', 'class', 'view-btn wow fadeInUp' );
										$this->add_render_attribute( 'button2_attr', 'data-wow-delay', '.5s' );
										if ( ! empty( $btn_url ) ) {
											$this->add_render_attribute( 'button2_attr', 'href', esc_url( $btn_url ) );
										} else {
											$this->add_render_attribute( 'button2_attr', 'href', '#' );
										}
										if ( ! empty( $settings['button_link2']['is_external'] ) ) {
											$this->add_render_attribute( 'button2_attr', 'target', '_blank' );
										}
										if ( ! empty( $settings['button_link2']['nofollow'] ) ) {
											$this->add_render_attribute( 'button2_attr', 'rel', 'nofollow' );
										}

										// Split into UTF-8 characters
										$chars = preg_split('//u', $btn_text, -1, PREG_SPLIT_NO_EMPTY);

										// Make ONLY the first word active (until the first space)
										$first_space_index = null;
										foreach ( $chars as $i => $ch ) {
											if ( $ch === ' ' ) { $first_space_index = $i; break; }
										}
										$active_until = is_null($first_space_index) ? count($chars) : $first_space_index;

										echo '<a ' . $this->get_render_attribute_string( 'button2_attr' ) . '>';

										foreach ( $chars as $i => $ch ) {
											if ( $ch === ' ' ) {
												echo '<span class="space"></span>';
											} else {
												// first word = active, others = no class
												$cls = ($i < $active_until) ? ' class="active"' : '';
												echo '<span' . $cls . '>' . esc_html($ch) . '</span>';
											}
										}

										echo '</a>';
									}						

									?>	

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="middle-shape float-bob-x">  
                        <?php  if ( !empty(esc_url($settings['image7']['id']) )) : ?>   
							<img src="<?php echo wp_get_attachment_url($settings['image7']['id']);?>" alt=""/>
						<?php endif;?>
                    </div>
                </div>
            </div>
            <div class="game-wrapper section-padding pb-0">
                <div class="container">
                    <div class="row g-4">
                        <div class="col-xl-8">
                            <div class="section-title">
                                <h6 class="wow fadeInUp"><?php echo $settings['subtitle2'];?></h6>
                                <h2 class="wow fadeInUp" data-wow-delay=".3s">
                                  <?php echo $settings['title2'];?>
                                </h2>
                            </div>
                            <div class="game-slider-wrapper">
                                <div class="swiper game-slider">
                                    <div class="swiper-wrapper">

										<?php foreach($settings['repeat'] as $item):?>	
										<div class="swiper-slide">
											<div class="game-image-items">
												<?php if(!empty(wp_get_attachment_url($item['section_image']['id']))): ?>
													<img src="<?php echo wp_get_attachment_url($item['section_image']['id']);?>" alt="">
												<?php endif;?>
												<ul>
													<li>
														<?php if(!empty(wp_get_attachment_url($item['section_image2']['id']))): ?>
															<img src="<?php echo wp_get_attachment_url($item['section_image2']['id']);?>" alt="">
														<?php endif;?>
															<?php echo wp_kses($item['section_subtitle'], $allowed_tags);?>
													</li>
													<li>
														<?php if(!empty(wp_get_attachment_url($item['section_image3']['id']))): ?>
															<img src="<?php echo wp_get_attachment_url($item['section_image3']['id']);?>" alt="">
														<?php endif;?>
														<?php echo wp_kses($item['section_subtitle2'], $allowed_tags);?>
													</li>
												</ul>
												<div class="game-content">
													<h3>
														<a href="<?php echo esc_url($item['section_button_link']['url']);?>">
															<?php echo wp_kses($item['section_title'], $allowed_tags);?>
														</a>
													</h3>
												</div>
											</div>
										</div>
										<?php endforeach; ?>
                                	</div>
                                </div>
                            </div>
                            <div class="game-arrow-button">
                                <div class="array-button d-flex align-items-center wow fadeInUp" data-wow-delay=".3s">
                                    <button class="array-prev">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                            <g clip-path="url(#clip0_0_434)">
                                                <path d="M1.16006 18L14.762 18C15.4019 18 15.9222 17.4797 15.9222 16.8398C15.9222 16.2 15.4019 15.6797 14.762 15.6797L3.96553 15.6797L17.6589 1.98281C18.1124 1.5293 18.1124 0.794531 17.6589 0.341017C17.2054 -0.112499 16.4706 -0.112499 16.0171 0.341017L2.32373 14.0379L2.32373 3.24141C2.32373 2.60156 1.80342 2.08125 1.16357 2.08125C0.52373 2.08125 0.00341662 2.60156 0.00341668 3.24141L0.00341787 16.8398C-9.73203e-05 17.4797 0.520214 18 1.16006 18Z" fill="#0B0E13"/>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_0_434">
                                                <rect width="18" height="18" fill="white" transform="translate(18 18) rotate(180)"/>
                                                </clipPath>
                                            </defs>
                                        </svg>
                                    </button>
                                    <button class="array-next">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <g clip-path="url(#clip0_0_427)">
                                            <path d="M16.8399 0H3.23799C2.59814 0 2.07783 0.520312 2.07783 1.16016C2.07783 1.8 2.59814 2.32031 3.23799 2.32031H14.0345L0.341113 16.0172C-0.112402 16.4707 -0.112402 17.2055 0.341113 17.659C0.794629 18.1125 1.52939 18.1125 1.98291 17.659L15.6763 3.96211V14.7586C15.6763 15.3984 16.1966 15.9187 16.8364 15.9187C17.4763 15.9187 17.9966 15.3984 17.9966 14.7586V1.16016C18.0001 0.520312 17.4798 0 16.8399 0Z" fill="#0B0E13"/>
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_0_427">
                                            <rect width="18" height="18" fill="white"/>
                                            </clipPath>
                                        </defs>
                                        </svg>
                                    </button>
                                </div>                               

								<?php
								$btn_text = $settings['button_text'] ?? '';
								$btn_url  = $settings['button_link2']['url'] ?? '';

								if ( $btn_text ) {
									// Prepare link attributes
									$this->add_render_attribute( 'button2_attr', 'class', 'view-btn wow fadeInUp' );
									$this->add_render_attribute( 'button2_attr', 'data-wow-delay', '.5s' );
									if ( ! empty( $btn_url ) ) {
										$this->add_render_attribute( 'button2_attr', 'href', esc_url( $btn_url ) );
									} else {
										$this->add_render_attribute( 'button2_attr', 'href', '#' );
									}
									if ( ! empty( $settings['button_link2']['is_external'] ) ) {
										$this->add_render_attribute( 'button2_attr', 'target', '_blank' );
									}
									if ( ! empty( $settings['button_link2']['nofollow'] ) ) {
										$this->add_render_attribute( 'button2_attr', 'rel', 'nofollow' );
									}

									// Split into UTF-8 characters
									$chars = preg_split('//u', $btn_text, -1, PREG_SPLIT_NO_EMPTY);

									// Make ONLY the first word active (until the first space)
									$first_space_index = null;
									foreach ( $chars as $i => $ch ) {
										if ( $ch === ' ' ) { $first_space_index = $i; break; }
									}
									$active_until = is_null($first_space_index) ? count($chars) : $first_space_index;

									echo '<a ' . $this->get_render_attribute_string( 'button2_attr' ) . '>';

									foreach ( $chars as $i => $ch ) {
										if ( $ch === ' ' ) {
											echo '<span class="space"></span>';
										} else {
											// first word = active, others = no class
											$cls = ($i < $active_until) ? ' class="active"' : '';
											echo '<span' . $cls . '>' . esc_html($ch) . '</span>';
										}
									}

									echo '</a>';
								}						

								?>	

                            </div>
                        </div>
                    </div>
                </div>
                <div class="top-image wow bounceInRight" data-wow-delay="600ms" data-wow-duration="1000ms">
                    <?php  if ( !empty(esc_url($settings['image8']['id']) )) : ?>   
						<img src="<?php echo wp_get_attachment_url($settings['image8']['id']);?>" alt=""/>
					<?php endif;?>
                    <div class="radius-shape float-bob-y">
                       <?php  if ( !empty(esc_url($settings['image9']['id']) )) : ?>   
							<img src="<?php echo wp_get_attachment_url($settings['image9']['id']);?>" alt=""/>
						<?php endif;?>
                    </div>
                </div>
            </div>
        </section>

             
		<?php 
	}


}

Plugin::instance()->widgets_manager->register_widget_type(new About_With_Games());