<?php

namespace Unlockafe_addons\Widgets;

use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Widget_Base;

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


/**
 * Pricing table style one
 *
 * @since 1.0.0
 */
class Team_Grid extends Widget_Base
{
	use \Unlockafe_addons\Traits\Widget_helper;
	use \Unlockafe_addons\Traits\Utils;

	/**
	 * Retrieve the widget name.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name()
	{
		return 'unlockafe-team-grid';
	}

	/**
	 * Retrieve the widget title.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return __( 'Team', 'unlock-addons-for-elementor' );
	}

	/**
	 * Retrieve the widget icon.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon()
	{
		return 'eicon-call-to-action ulicon';
	}

	/**
	 * Retrieve the list of categories the widget belongs to.
	 *
	 * Used to determine where to display the widget in the editor.
	 *
	 * Note that currently Elementor supports only one category.
	 * When multiple categories passed, Elementor uses the first one.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return array Widget categories.
	 */
	public function get_categories()
	{
		return ['unlockafe-addons'];
	}

	/**
	 * Retrieve the list of scripts the widget depended on.
	 *
	 * Used to set scripts dependencies required to run the widget.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return array Widget scripts dependencies.
	 */
	public function get_script_depends()
	{
		return [];
	}

	/**
	 * Register the 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()
	{


		/**
		 * =======================
		 * Member information
		 */
		$this->start_controls_section(
			'team_member_info',
			[ 
				'label' => esc_html__( 'Team Member', 'unlock-addons-for-elementor' ),
			]
		);

		$this->add_control(
			'layout_control',
			[ 
				'label' => esc_html__( 'Layout Style', 'unlock-addons-for-elementor' ),
				'type' => Controls_Manager::SELECT,
				'default' => '1',
				'options' => array(
					'layout-1' => esc_html__( 'Style 1', 'unlock-addons-for-elementor' ),
					'layout-2' => esc_html__( 'Style 2', 'unlock-addons-for-elementor' ),
				),
			]
		);


		/**
		 * ==================
		 *  Team Member controls
		 * ==================
		 */
		$this->add_control(
			'image',
			[ 
				'label' => esc_html__( 'Choose Image', 'unlock-addons-for-elementor' ),
				'type' => \Elementor\Controls_Manager::MEDIA,
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				],
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Image_Size::get_type(),
			[
				'name' => 'image_thumb', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
				// 'exclude' => [ 'custom' ],
				'include' => [],
				'default' => 'large',
			]
		);

		$this->add_control(
			'is_link_name',
			[ 
				'label' => esc_html__( 'Link name', 'unlock-addons-for-elementor' ),
				'type' => \Elementor\Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Yes', 'unlock-addons-for-elementor' ),
				'label_off' => esc_html__( 'No', 'unlock-addons-for-elementor' ),
				'return_value' => 'yes',
				'separator' => 'before'
			]
		);

		// name
		$this->add_control(
			'name',
			[ 
				'label' => esc_html__( 'Name', 'unlock-addons-for-elementor' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'default' => esc_html__( 'Member name', 'unlock-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Member name', 'unlock-addons-for-elementor' ),
				'separetor' => 'before'
			]
		);

		$this->add_control(
			'name_link',
			[ 
				'label' => esc_html__( 'Link', 'unlock-addons-for-elementor' ),
				'type' => \Elementor\Controls_Manager::URL,
				'default' => [
					'url' => '#',
				],
				'label_block' => true,
				'condition' => [
					'is_link_name' => 'yes',
					'name!' => ''
				],
				'separator' => 'before'
			]
		);


		// Designation
		$this->add_control(
			'designation',
			[ 
				'label' => esc_html__( 'Designation', 'unlock-addons-for-elementor' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'default' => esc_html__( 'Member Designation', 'unlock-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Member Designation', 'unlock-addons-for-elementor' ),
			]
		);

		// title tag
		$this->add_control(
			'heading_tags',
			[ 
				'label' => esc_html__( 'Title Tag', 'unlock-addons-for-elementor' ),
				'type' => Controls_Manager::CHOOSE,
				'label_block' => true,
				'description' => esc_html__( 'You can change Heading Tags from here.', 'unlock-addons-for-elementor' ),
				'options' => [ 
					'h1' => [ 
						'title' => esc_html__( 'H1', 'unlock-addons-for-elementor' ),
						'icon' => 'eicon-editor-h1',
					],
					'h2' => [ 
						'title' => esc_html__( 'H2', 'unlock-addons-for-elementor' ),
						'icon' => 'eicon-editor-h2',
					],
					'h3' => [ 
						'title' => esc_html__( 'H3', 'unlock-addons-for-elementor' ),
						'icon' => 'eicon-editor-h3',
					],
					'h4' => [ 
						'title' => esc_html__( 'H4', 'unlock-addons-for-elementor' ),
						'icon' => 'eicon-editor-h4',
					],
					'h5' => [ 
						'title' => esc_html__( 'H5', 'unlock-addons-for-elementor' ),
						'icon' => 'eicon-editor-h5',
					],
					'h6' => [ 
						'title' => esc_html__( 'H6', 'unlock-addons-for-elementor' ),
						'icon' => 'eicon-editor-h6',
					],
				],
				'default' => 'h2',
				'condition' => [
					'name!' => '',
				],
				'separator' => 'before'
			]
		);

		$this->end_controls_section();


		/**
		 * ==================
		 *  Team Member Social
		 * ==================
		 */

		$this->start_controls_section(
			'team_member_social',
			[ 
				'label' => esc_html__( 'Social', 'unlock-addons-for-elementor' ),
			]
		);

		$repeater = new \Elementor\Repeater();

		$repeater->add_control(
			'social_icon',
			[ 
				'label' => esc_html__( 'Social Icon', 'unlock-addons-for-elementor' ),
				'type' => Controls_Manager::ICONS,
				'fa4compatibility' => 'icon',
				// 'skin' => 'inline',
				// 'label_block' => false,
			]
		);

		$repeater->add_control(
			'social_link',
			[ 
				'label' => esc_html__( 'Social Link', 'unlock-addons-for-elementor' ),
				'type' => \Elementor\Controls_Manager::URL,
				'options' => ['url', 'is_external', 'nofollow'],
				'default' => [
					'url' => '#',
				],
				'label_block' => true,
			]
		);

		$this->add_control(
			'social_profiles',
			[ 
				'label' => esc_html__( 'Repeater List', 'unlock-addons-for-elementor' ),
				'type' => \Elementor\Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'social_icon' => [
							'value' => 'fab fa-facebook-f',
							'library' => 'fa-solid',
						],
						'social_link' => esc_url('https://www.facebook.com/wprealizer'),
					],
					[
						'social_icon' => [
							'value' => 'fab fa-x-twitter',
							'library' => 'fa-solid',
						],
						'social_link' => esc_url('https://twitter.com/wprealizer'),
					],
					[
						'social_icon' => [
							'value' => 'fab fa-instagram',
							'library' => 'fa-solid',
						],
						'social_link' => esc_url('https://www.instagram.com/'),
					],
					[
						'social_icon' => [
							'value' => 'fab fa-linkedin-in',
							'library' => 'fa-solid',
						],
						'social_link' => esc_url('https://www.linkedin.com/'),
					],
				],
			]
		);

		$this->end_controls_section();

		// Style Controls
		$this->register_style_controls();
	}

	/**
	 * Register style controls.
	 */
	protected function register_style_controls()
	{
		// Container Style
		$this->start_controls_section(
			'container_style_section',
			[
				'label' => __('Container', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name' => 'container_background',
				'label' => __('Background', 'unlock-addons-for-elementor'),
				'types' => ['classic', 'gradient'],
				'selector' => '{{WRAPPER}} .unlockafe-team-wrap, {{WRAPPER}} .unlockafe-team-slide-box',
			]
		);

		$this->add_responsive_control(
			'container_padding',
			[
				'label' => __('Padding', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .unlockafe-team-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					'{{WRAPPER}} .unlockafe-team-slide-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'container_margin',
			[
				'label' => __('Margin', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .unlockafe-team-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					'{{WRAPPER}} .unlockafe-team-slide-box' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			[
				'name' => 'container_border',
				'label' => __('Border', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .unlockafe-team-wrap, {{WRAPPER}} .unlockafe-team-slide-box',
			]
		);

		$this->add_responsive_control(
			'container_border_radius',
			[
				'label' => __('Border Radius', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .unlockafe-team-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					'{{WRAPPER}} .unlockafe-team-slide-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'container_box_shadow',
				'label' => __('Box Shadow', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .unlockafe-team-wrap, {{WRAPPER}} .unlockafe-team-slide-box',
			]
		);

		$this->end_controls_section();

		// Image Style
		$this->start_controls_section(
			'image_style_section',
			[
				'label' => __('Image', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'image_border_radius',
			[
				'label' => __('Border Radius', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .team-img img, {{WRAPPER}} .team-slide-img img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					'{{WRAPPER}} .team-img, {{WRAPPER}} .team-slide-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
				],
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			[
				'name' => 'image_border',
				'label' => __('Border', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .team-img img, {{WRAPPER}} .team-slide-img img',
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'image_box_shadow',
				'label' => __('Box Shadow', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .team-img img, {{WRAPPER}} .team-slide-img img',
			]
		);

		$this->add_control(
			'image_hover_scale',
			[
				'label' => __('Hover Scale', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 1.5,
						'step' => 0.01,
					],
				],
				'default' => [
					'size' => 1.1,
				],
				'selectors' => [
					'{{WRAPPER}} .unlockafe-team-wrap:hover .team-img img, {{WRAPPER}} .unlockafe-team-slide-box:hover .team-slide-img img' => 'transform: scale({{SIZE}});',
				],
			]
		);

		$this->add_control(
			'image_transition_duration',
			[
				'label' => __('Transition Duration', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 3,
						'step' => 0.1,
					],
				],
				'default' => [
					'size' => 0.3,
				],
				'selectors' => [
					'{{WRAPPER}} .team-img img, {{WRAPPER}} .team-slide-img img' => 'transition: all {{SIZE}}s ease;',
				],
			]
		);

		$this->end_controls_section();

		// Name/Title Style
		$this->start_controls_section(
			'name_style_section',
			[
				'label' => __('Name/Title', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'name_color',
			[
				'label' => __('Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'default' => '#333333',
				'selectors' => [
					'{{WRAPPER}} .team-content h1, {{WRAPPER}} .team-content h2, {{WRAPPER}} .team-content h3, {{WRAPPER}} .team-content h4, {{WRAPPER}} .team-content h5, {{WRAPPER}} .team-content h6' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .team-content h1 a, {{WRAPPER}} .team-content h2 a, {{WRAPPER}} .team-content h3 a, {{WRAPPER}} .team-content h4 a, {{WRAPPER}} .team-content h5 a, {{WRAPPER}} .team-content h6 a' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .team-slide-info h1, {{WRAPPER}} .team-slide-info h2, {{WRAPPER}} .team-slide-info h3, {{WRAPPER}} .team-slide-info h4, {{WRAPPER}} .team-slide-info h5, {{WRAPPER}} .team-slide-info h6' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .team-slide-info h1 a, {{WRAPPER}} .team-slide-info h2 a, {{WRAPPER}} .team-slide-info h3 a, {{WRAPPER}} .team-slide-info h4 a, {{WRAPPER}} .team-slide-info h5 a, {{WRAPPER}} .team-slide-info h6 a' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .team-name, {{WRAPPER}} .team-name a' => 'color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_control(
			'name_hover_color',
			[
				'label' => __('Hover Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .team-content h1 a:hover, {{WRAPPER}} .team-content h2 a:hover, {{WRAPPER}} .team-content h3 a:hover, {{WRAPPER}} .team-content h4 a:hover, {{WRAPPER}} .team-content h5 a:hover, {{WRAPPER}} .team-content h6 a:hover' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .team-slide-info h1 a:hover, {{WRAPPER}} .team-slide-info h2 a:hover, {{WRAPPER}} .team-slide-info h3 a:hover, {{WRAPPER}} .team-slide-info h4 a:hover, {{WRAPPER}} .team-slide-info h5 a:hover, {{WRAPPER}} .team-slide-info h6 a:hover' => 'color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'name_typography',
				'label' => __('Typography', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .team-content h1, {{WRAPPER}} .team-content h2, {{WRAPPER}} .team-content h3, {{WRAPPER}} .team-content h4, {{WRAPPER}} .team-content h5, {{WRAPPER}} .team-content h6, {{WRAPPER}} .team-slide-info h1, {{WRAPPER}} .team-slide-info h2, {{WRAPPER}} .team-slide-info h3, {{WRAPPER}} .team-slide-info h4, {{WRAPPER}} .team-slide-info h5, {{WRAPPER}} .team-slide-info h6, {{WRAPPER}} .team-name',
			]
		);

		$this->add_responsive_control(
			'name_margin',
			[
				'label' => __('Margin', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .team-content h1, {{WRAPPER}} .team-content h2, {{WRAPPER}} .team-content h3, {{WRAPPER}} .team-content h4, {{WRAPPER}} .team-content h5, {{WRAPPER}} .team-content h6' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
					'{{WRAPPER}} .team-slide-info h1, {{WRAPPER}} .team-slide-info h2, {{WRAPPER}} .team-slide-info h3, {{WRAPPER}} .team-slide-info h4, {{WRAPPER}} .team-slide-info h5, {{WRAPPER}} .team-slide-info h6' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);

		$this->end_controls_section();

		// Designation Style
		$this->start_controls_section(
			'designation_style_section',
			[
				'label' => __('Designation', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'designation_color',
			[
				'label' => __('Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'default' => '#666666',
				'selectors' => [
					'{{WRAPPER}} .team-content p' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .team-slide-info p' => 'color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'designation_typography',
				'label' => __('Typography', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .team-content p, {{WRAPPER}} .team-slide-info p',
			]
		);

		$this->add_responsive_control(
			'designation_margin',
			[
				'label' => __('Margin', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .team-content p' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
					'{{WRAPPER}} .team-slide-info p' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);

		$this->end_controls_section();

		// Social Icons Style
		$this->start_controls_section(
			'social_style_section',
			[
				'label' => __('Social Icons', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'social_icon_size',
			[
				'label' => __('Icon Size', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em'],
				'range' => [
					'px' => [
						'min' => 10,
						'max' => 50,
						'step' => 1,
					],
					'em' => [
						'min' => 0.5,
						'max' => 3,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 18,
				],
				'selectors' => [
					'{{WRAPPER}} .team-hover ul li a svg, {{WRAPPER}} .team-slide-hover li a svg' => 'width: {{SIZE}}{{UNIT}} !important; height: {{SIZE}}{{UNIT}} !important;',
				],
			]
		);

		$this->add_control(
			'social_icon_color',
			[
				'label' => __('Icon Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .team-hover ul li a svg, {{WRAPPER}} .team-slide-hover li a svg' => 'fill: {{VALUE}} !important; color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_control(
			'social_icon_hover_color',
			[
				'label' => __('Hover Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .team-hover ul li a:hover svg, {{WRAPPER}} .team-slide-hover li a:hover svg' => 'fill: {{VALUE}} !important; color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_control(
			'social_icon_background',
			[
				'label' => __('Background Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .team-hover ul li a, {{WRAPPER}} .team-slide-hover li a' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'social_icon_hover_background',
			[
				'label' => __('Hover Background', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .team-hover ul li a:hover, {{WRAPPER}} .team-slide-hover li a:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'social_icon_padding',
			[
				'label' => __('Padding', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em'],
				'selectors' => [
					'{{WRAPPER}} .team-hover ul li a, {{WRAPPER}} .team-slide-hover li a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'social_icon_border_radius',
			[
				'label' => __('Border Radius', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .team-hover ul li a, {{WRAPPER}} .team-slide-hover li a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'social_icon_spacing',
			[
				'label' => __('Spacing', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 30,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 8,
				],
				'selectors' => [
					'{{WRAPPER}} .team-hover ul li:not(:last-child), {{WRAPPER}} .team-slide-hover li:not(:last-child)' => 'margin-right: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .team-hover ul li:not(:first-child), {{WRAPPER}} .team-slide-hover li:not(:first-child)' => 'margin-left: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			[
				'name' => 'social_icon_border',
				'label' => __('Border', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .team-hover ul li a, {{WRAPPER}} .team-slide-hover li a',
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'social_icon_box_shadow',
				'label' => __('Box Shadow', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .team-hover ul li a, {{WRAPPER}} .team-slide-hover li a',
			]
		);

		$this->end_controls_section();

		// Content Area Style
		$this->start_controls_section(
			'content_style_section',
			[
				'label' => __('Content Area', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name' => 'content_background',
				'label' => __('Background', 'unlock-addons-for-elementor'),
				'types' => ['classic', 'gradient'],
				'selector' => '{{WRAPPER}} .team-content, {{WRAPPER}} .team-slide-info',
			]
		);

		$this->add_responsive_control(
			'content_padding',
			[
				'label' => __('Padding', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .team-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					'{{WRAPPER}} .team-slide-info' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'content_alignment',
			[
				'label' => __('Alignment', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => __('Left', 'unlock-addons-for-elementor'),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => __('Center', 'unlock-addons-for-elementor'),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => __('Right', 'unlock-addons-for-elementor'),
						'icon' => 'eicon-text-align-right',
					],
				],
				'default' => 'left',
				'selectors' => [
					'{{WRAPPER}} .team-content' => 'text-align: {{VALUE}};',
					'{{WRAPPER}} .team-slide-info' => 'text-align: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();
	}


    /**
     * Get SVG icon for social media
     * 
     * @param string $icon_name The icon name/type
     * @return string SVG markup
     */
    public function get_social_svg_icon($icon_name) {
        // Default SVG attributes
        $svg_attrs = 'width="18" height="18" viewBox="0 0 24 24" fill="currentColor"';
        
        // SVG paths for different social icons
        $icons = [
            'facebook' => '<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>',
            'twitter' => '<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>',
            'instagram' => '<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>',
            'linkedin' => '<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>'
        ];
        
        // Try to match the icon name with our known icons
        $icon_name = strtolower($icon_name);
        
        // Match icon name from various possible formats
        $matched_icon = '';
        if (strpos($icon_name, 'facebook') !== false) {
            $matched_icon = 'facebook';
        } elseif (strpos($icon_name, 'twitter') !== false || strpos($icon_name, 'x-twitter') !== false) {
            $matched_icon = 'twitter';
        } elseif (strpos($icon_name, 'instagram') !== false) {
            $matched_icon = 'instagram';
        } elseif (strpos($icon_name, 'linkedin') !== false) {
            $matched_icon = 'linkedin';
        }
        
        // Return the SVG if we have a match
        if (!empty($matched_icon) && isset($icons[$matched_icon])) {
            return '<svg xmlns="http://www.w3.org/2000/svg" ' . $svg_attrs . '>' . $icons[$matched_icon] . '</svg>';
        }
        
        // Return a generic icon as fallback
        return '<svg xmlns="http://www.w3.org/2000/svg" ' . $svg_attrs . '><circle cx="12" cy="12" r="10"/></svg>';
    }

	/**
	 * Render the 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();

		if ($settings['is_link_name'] == 'yes') {
			$this->add_link_attributes('name_link', $settings['name_link']);
		}


		if (empty($settings['name']))
			return;

		switch ($settings['layout_control']) {
			case 'layout-1':
				$this->get_skin('team-grid/layout-1', $settings);
				break;

			case 'layout-2':
				$this->get_skin('team-grid/layout-2', $settings);
				break;

			default:
				$this->get_skin('team-grid/layout-1', $settings);
		}
	}
}