<?php

namespace Unlockafe_addons\Widgets;

use Unlockafe_addons\Traits\Utils as UnlockafeUtils;
use Unlockafe_addons\Traits\Widget_helper;
use Elementor\Element_Section;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use \Elementor\Utils;
use \Elementor\Control_Media;
use \Elementor\Repeater;
use \Elementor\Group_Control_Border;
use \Elementor\Group_Control_Box_Shadow;
use \Elementor\Group_Control_Text_Shadow;
use \Elementor\Group_Control_Typography;
use \Elementor\Group_Control_Background;

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

/**
 * Services Widget
 *
 * @since 1.0.0
 */
class Services extends Widget_Base
{

	use Widget_helper, UnlockafeUtils;

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

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

	/**
	 * Retrieve the widget icon.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon()
	{
		return 'eicon-posts-grid 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 [];
	}

	public function get_style_depends()
	{
		return ['unlockafe-global'];
	}

	/**
	 * 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()
	{
		$this->register_controls_section();
		$this->style_tab_content();
	}

	protected function register_controls_section()
	{

		// layout Panel
		$this->start_controls_section(
			'wpr_layout',
			[
				'label' => esc_html__('Design Layout', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_control(
			'wpr_design_style',
			[
				'label' => esc_html__('Select Layout', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'layout-1' => esc_html__('Layout 1', 'unlock-addons-for-elementor'),
					'layout-2' => esc_html__('Layout 2', 'unlock-addons-for-elementor'),
					'layout-3' => esc_html__('Layout 3', 'unlock-addons-for-elementor'),
					'layout-4' => esc_html__('Layout 4', 'unlock-addons-for-elementor'),
					'layout-5' => esc_html__('Layout 5', 'unlock-addons-for-elementor'),
					'layout-6' => esc_html__('Layout 6', 'unlock-addons-for-elementor'),
					'layout-7' => esc_html__('Layout 7', 'unlock-addons-for-elementor'),
				],
				'default' => 'layout-1',
			]
		);

		$this->add_control(
			'wpr_services_arrow_switcher',
			[
				'label' => esc_html__('Arrow SWITCHER', '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',
				'default' => 'yes',
				'separator' => 'before',
				'condition' => [
					'wpr_design_style' => ['layout-10']
				]
			]
		);

		$this->end_controls_section();

		// Services Sections
		$this->start_controls_section(
			'servicesContentSec',
			[
				'label' => esc_html__('Services Content', 'unlock-addons-for-elementor'),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
				'condition' => [
					'wpr_design_style' => ['layout-3']
				]
			]
		);

		$this->add_control(
			'wpr_shape_switcher',
			[
				'label' => esc_html__('SHAPE SWITCHER', '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',
				'default' => 'yes',
				'separator' => 'before',
				'condition' => [
					'wpr_design_style' => ['layout-3']
				]
			]
		);

		$this->add_control(
			'service_shape_img',
			[
				'label' => esc_html__('Service Shape', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::MEDIA,
				'default' => [
					'url' => Utils::get_placeholder_image_src(),
				],
				'condition' => [
					'wpr_design_style' => ['layout-3'],
				]
			]
		);

		$this->add_control(
			'wpr_subtitle',
			[
				'label' => esc_html__('Sub Title', 'unlock-addons-for-elementor'),
				'description' => $this->tp_get_allowed_html_desc('intermediate'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('WPR SubTitle Here', 'unlock-addons-for-elementor'),
				'placeholder' => esc_html__('Type SubTitle', 'unlock-addons-for-elementor'),
				'label_block' => true,
			]
		);

		$this->add_control(
			'wpr_title',
			[
				'label' => esc_html__('Title', 'unlock-addons-for-elementor'),
				'description' => $this->tp_get_allowed_html_desc('intermediate'),
				'type' => Controls_Manager::TEXTAREA,
				'default' => esc_html__('WPR Title Here', 'unlock-addons-for-elementor'),
				'placeholder' => esc_html__('Type Heading Text', 'unlock-addons-for-elementor'),
				'label_block' => true,
			]
		);


		$this->add_control(
			'wpr_btn_text',
			[
				'label' => esc_html__('Button Text', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('Button Text', 'unlock-addons-for-elementor'),
				'title' => esc_html__('Enter button text', 'unlock-addons-for-elementor'),
				'label_block' => false,
				'condition' => [
					'wpr_design_style' => ['layout-3'],
				]
			]
		);

		// service link 
		$this->tp_render_links_controls('service_link');

		$this->add_control(
			'wpr_title_tag',
			[
				'label' => esc_html__('Title HTML Tag', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::CHOOSE,
				'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',
				'toggle' => false,
			]
		);

		$this->add_responsive_control(
			'wpr_align',
			[
				'label' => esc_html__('Alignment', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => esc_html__('Left', 'unlock-addons-for-elementor'),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__('Center', 'unlock-addons-for-elementor'),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__('Right', 'unlock-addons-for-elementor'),
						'icon' => 'eicon-text-align-right',
					],
				],
				'toggle' => false,
				'selectors' => [
					'{{WRAPPER}} .tp-align' => 'text-align: {{VALUE}};'
				]
			]
		);

		$this->add_control(
			'wpr_description',
			[
				'label' => esc_html__('Description', 'unlock-addons-for-elementor'),
				'description' => $this->tp_get_allowed_html_desc('intermediate'),
				'type' => Controls_Manager::TEXTAREA,
				'default' => esc_html__('This is description text here.', 'unlock-addons-for-elementor'),
				'placeholder' => esc_html__('Type section description here', 'unlock-addons-for-elementor'),
				'label_block' => true,
				'condition' => [
					'wpr_design_style' => ['layout-10']
				]
			]
		);

		$this->end_controls_section();

		// service section
		$this->start_controls_section(
			'wpr_service_section',
			[
				'label' => __('Service Repeater Item', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'repeater_condition',
			[
				'label' => __('Field condition', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'style_1' => __('Style 1', 'unlock-addons-for-elementor'),
					'style_2' => __('Style 2', 'unlock-addons-for-elementor'),
					'style_3' => __('Style 3', 'unlock-addons-for-elementor'),
					'style_4' => __('Style 4', 'unlock-addons-for-elementor'),
					'style_5' => __('Style 5', 'unlock-addons-for-elementor'),
					'style_6' => __('Style 6', 'unlock-addons-for-elementor'),
					'style_7' => __('Style 7', 'unlock-addons-for-elementor'),
				],
				'default' => 'style_1',
				'frontend_available' => true,
				'style_transfer' => true,
			]
		);

		$repeater->add_control(
			'service_animation_delay',
			[
				'label' => esc_html__('Animation Delay', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('.2', 'unlock-addons-for-elementor'),
				'description' => $this->tp_get_allowed_html_desc('intermediate'),
				'label_block' => true,
				'condition' => [
					'repeater_condition' => ['style_2']
				]
			]
		);

		$repeater->add_control(
			'activate_class',
			[
				'label'        => __('Active', 'unlock-addons-for-elementor'),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __('Yes', 'unlock-addons-for-elementor'),
				'label_off'    => __('No', 'unlock-addons-for-elementor'),
				'return_value' => 'yes',
				'default'      => 'no',
				'condition' => [
					'repeater_condition' => ['style_7'],
				]
			]
		);

		$repeater->add_control(
			'wpr_services_title_before_color',
			[
				'label' => esc_html__('Title Before Color', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .service-box-2 .header:before' => 'background-color: {{VALUE}}',
				],
				'condition' => [
					'repeater_condition' => ['style_10'],
				]
			]
		);

		$repeater->add_control(
			'service_image',
			[
				'label' => esc_html__('Service Image', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::MEDIA,
				'default' => [
					'url' => Utils::get_placeholder_image_src(),
				],
				'condition' => [
					'repeater_condition' => ['style_1', 'style_2', 'style_5', 'style_7'],
				],
			]
		);

		$repeater->add_control(
			'service_svg',
			[
				'label' => esc_html__('Service SVG', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXTAREA,
				'default' => esc_html__('SGV Code', 'unlock-addons-for-elementor'),
				'description' => $this->tp_get_allowed_html_desc('intermediate'),
				'label_block' => true,
				'condition' => [
					'repeater_condition' => ['style_3', 'style_4']
				]
			]
		);

		$repeater->add_control(
			'service_number',
			[
				'label' => esc_html__('Service Number', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('01', 'unlock-addons-for-elementor'),
				'description' => $this->tp_get_allowed_html_desc('intermediate'),
				'label_block' => true,
				'condition' => [
					'repeater_condition' => ['style_1', 'style_2', 'style_3', 'style_4', 'style_5']
				]
			]
		);

		$repeater->add_control(
			'service_title',
			[
				'label' => esc_html__('Service Title', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('Black book', 'unlock-addons-for-elementor'),
				'description' => $this->tp_get_allowed_html_desc('intermediate'),
				'label_block' => true,
			]
		);

		$repeater->add_control(
			'service_title_shape_img',
			[
				'label' => esc_html__('Service Title Shape', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::MEDIA,
				'default' => [
					'url' => Utils::get_placeholder_image_src(),
				],
				'condition' => [
					'repeater_condition' => ['style_10']
				]
			]
		);

		$repeater->add_control(
			'services_desc',
			[
				'label' => esc_html__('Service Description', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXTAREA,
				'default' => esc_html__('Service Description', 'unlock-addons-for-elementor'),
				'description' => $this->tp_get_allowed_html_desc('intermediate'),
				'label_block' => true,
				'condition' => [
					'repeater_condition' => ['style_1', 'style_2', 'style_4', 'style_5', 'style_7']
				]
			]
		);

		// Nested Repeater
		$nested_repeater = new Repeater();
		$nested_repeater->add_control(
			'nested_services_title',
			[
				'label' => esc_html__('Category Title', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('Nested Item Title', 'unlock-addons-for-elementor'),
				'label_block' => true,
			]
		);
		$nested_repeater->add_control(
			'nested_services_cat_link',
			[
				'label' => esc_html__('Category Link', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::URL,
				'placeholder' => esc_html__('https://your-link.com', 'unlock-addons-for-elementor'),
				'default' => [
					'url' => '#',
					'is_external' => true,
					'nofollow' => true,
				],
				'label_block' => true,
				'condition' => [
					'repeater_condition' => ['style_10']
				]
			]
		);

		$repeater->add_control(
			'nested_items',
			[
				'label' => esc_html__('Category List', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::REPEATER,
				'fields' => $nested_repeater->get_controls(),
				'default' => [
					[
						'nested_services_title' => esc_html__('Graphic Design', 'unlock-addons-for-elementor'),
					],
					[
						'nested_services_title' => esc_html__('Branding and Identity', 'unlock-addons-for-elementor'),
					],
				],
				'title_field' => '{{{ nested_services_title }}}',
				'condition' => [
					'repeater_condition' => ['style_4']
				]
			]
		);

		$repeater->end_controls_tab();

		$repeater->add_control(
			'service_shape_img',
			[
				'label' => esc_html__('Shape Image', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::MEDIA,
				'default' => [
					'url' => Utils::get_placeholder_image_src(),
				],
				'condition' => [
					'repeater_condition' => ['style_7']
				]
			]
		);

		$repeater->add_control(
			'wpr_video_url',
			[
				'label' => esc_html__('Video URL', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXT,
				'default' => '',
				'label_block' => true,
				'description' => __("We recommend using an 'mp4' format video.", 'unlock-addons-for-elementor'),
				'condition' => [
					'repeater_condition' => ['style_10'],
				],
			]
		);

		$repeater->add_control(
			'service_cat',
			[
				'label' => esc_html__('Service Cat', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXTAREA,
				'default' => esc_html__('Clutch', 'unlock-addons-for-elementor'),
				'description' => $this->tp_get_allowed_html_desc('intermediate'),
				'label_block' => true,
				'condition' => [
					'repeater_condition' => ['style_20']
				]
			]
		);

		$repeater->add_control(
			'wpr_btn_link_switcher',
			[
				'label' => esc_html__('Show Button', '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',
				'default' => 'no',
				'separator' => 'before',
				'condition' => [
					'repeater_condition' => ['style_1', 'style_2', 'style_3', 'style_4', 'style_5', 'style_7']
				]
			]
		);

		$repeater->add_control(
			'wpr_btn_text',
			[
				'label' => esc_html__('Button Text', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('Button Text', 'unlock-addons-for-elementor'),
				'title' => esc_html__('Enter button text', 'unlock-addons-for-elementor'),
				'label_block' => false,
				'condition' => [
					'wpr_btn_link_switcher' => 'yes',
					'repeater_condition' => ['style_10']
				],
			]
		);

		$repeater->add_control(
			'wpr_btn_link_type',
			[
				'label' => esc_html__('Button Link Type', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::SELECT,
				'options' => [
					'1' => 'Custom Link',
					'2' => 'Internal Page',
				],
				'default' => '1',
				'condition' => [
					'wpr_btn_link_switcher' => 'yes',
				]
			]
		);
		$repeater->add_control(
			'wpr_btn_link',
			[
				'label' => esc_html__('Button Link', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::URL,
				'dynamic' => [
					'active' => true,
				],
				'placeholder' => esc_html__('https://your-link.com', 'unlock-addons-for-elementor'),
				'show_external' => true,
				'default' => [
					'url' => '#',
					'is_external' => false,
					'nofollow' => false,
				],
				'condition' => [
					'wpr_btn_link_type' => '1',
					'wpr_btn_link_switcher' => 'yes',
				]
			]
		);
		$repeater->add_control(
			'wpr_btn_page_link',
			[
				'label' => esc_html__('Select Button Link Page', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::SELECT2,
				'label_block' => true,
				'options' => $this->tp_get_all_pages(),
				'condition' => [
					'wpr_btn_link_type' => '2',
					'wpr_btn_link_switcher' => 'yes',
				]
			]
		);

		$repeater->end_controls_tab();

		$this->add_control(
			'wpr_service_slides',
			[
				'show_label' => false,
				'type' => Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'title_field' => '{{{ service_title }}}',
				'default' => [
					[
						'service_title' => __('Influencer Marketing', 'unlock-addons-for-elementor')
					],
					[
						'service_title' => __('Others Service', 'unlock-addons-for-elementor')
					],
				]
			]
		);

		$this->end_controls_section();
	}

	protected function style_tab_content()
	{
		$this->tp_section_style_controls(
			'services_section',
			'Section - Style',
			'.wpr-el-section'
		);
		$this->tp_basic_style_controls(
			'services_subtitle',
			'Heading SubTitle',
			'.wpr-el-subtitle',
			['layout-3'],
		);
		$this->tp_basic_style_controls(
			'services_title',
			'Heading Title',
			'.wpr-el-title',
			['layout-3'],
		);
		$this->tp_basic_style_controls(
			'services_rep_number',
			'Services Repeater Number',
			'.wpr-el-rep-number'
		);
		$this->tp_basic_style_controls(
			'services_desc',
			'Heading Description',
			'.wpr-el-desc',
			['layout-100'],
		);
		$this->tp_basic_style_controls(
			'services_rep_title',
			'Services Repeater Titile',
			'.wpr-el-rep-title'
		);
		$this->tp_basic_style_controls(
			'services_rep_desc',
			'Services Repeater Description',
			'.wpr-el-rep-desc',
			['layout-1', 'layout-2', 'layout-4', 'layout-5'],
		);
		$this->tp_basic_style_controls(
			'services_rep_cat',
			'Services Repeater Category',
			'.wpr-el-rep-cat',
			['layout-4'],
		);

		$this->tp_link_controls_style('service_btn1_style', 'Button', '.wpr-el-rep-btn', ['layout-2', 'layout-3']);

		// Image -Icon 
		$this->start_controls_section(
			'wpr_services_btn_section',
			[
				'label' => esc_html__('Image - Icon - SVG', 'unlock-addons-for-elementor'),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		// icon 
		$this->start_controls_tabs(
			'wpr_services_btn_tabs'
		);

		$this->start_controls_tab(
			'wpr_services_btn_tab',
			[
				'label' => esc_html__('Icon', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_responsive_control(
			'wpr_services_btn_icon_color',
			[
				'label' => esc_html__('Icon Color', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-el-service-btn span i' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_responsive_control(
			'wpr_services_btn_icon_font-size',
			[
				'label' => esc_html__('Font Size', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::SLIDER,
				'size_units' => ['px', '%', 'em', 'rem', 'custom'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 300,
						'step' => 5,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-service-btn span i' => 'font-size: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_tab();

		// image 
		$this->start_controls_tab(
			'wpr_services_btn_image_tab',
			[
				'label' => esc_html__('Image', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_responsive_control(
			'wpr_services_image_w',
			[
				'type' => \Elementor\Controls_Manager::SLIDER,
				'label' => esc_html__('Image Width', 'unlock-addons-for-elementor'),
				'size_units' => ['px', '%'],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 2000,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-service-img img' => 'min-width: {{SIZE}}{{UNIT}};',
				],
			]
		);
		$this->add_responsive_control(
			'wpr_services_image_h',
			[
				'type' => \Elementor\Controls_Manager::SLIDER,
				'label' => esc_html__('Image Height', 'unlock-addons-for-elementor'),
				'size_units' => ['px', '%'],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 2000,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-service-img img' => 'height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'wpr_image_object_style',
			[
				'label' => esc_html__('Object Fit', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::SELECT,
				'default' => 'cover',
				'options' => [
					'none' => esc_html__('None', 'unlock-addons-for-elementor'),
					'contain'  => esc_html__('Contain', 'unlock-addons-for-elementor'),
					'cover' => esc_html__('Cover', 'unlock-addons-for-elementor'),
					'fill' => esc_html__('fill', 'unlock-addons-for-elementor'),
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-service-img img' => 'object-fit: {{VALUE}};',
				],
			]
		);

		$this->end_controls_tab();

		// svg
		$this->start_controls_tab(
			'wpr_services_btn_svg_tab',
			[
				'label' => esc_html__('SVG', 'unlock-addons-for-elementor'),
			]
		);
		$this->add_responsive_control(
			'wpr_services_btn_svg_w',
			[
				'type' => \Elementor\Controls_Manager::SLIDER,
				'label' => esc_html__('SVG Width', 'unlock-addons-for-elementor'),
				'size_units' => ['px', '%'],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 300,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-service-btn span svg' => 'height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_tab();

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

		$this->add_responsive_control(
			'wpr_services_btn_bg',
			[
				'label' => esc_html__('Background Color', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-el-service-btn span::before' => 'background: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'tp_my_services_btn_normal_border_style',
				'selector' => '{{WRAPPER}} .wpr-el-service-btn span::before',
			]
		);

		$this->add_responsive_control(
			'wpr_services_btn_bg_margin',
			[
				'label' => esc_html__('Margin', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em', 'rem', 'custom'],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-service-btn span i, {{WRAPPER}} .wpr-el-service-img img , {{WRAPPER}} .wpr-el-service-btn span svg' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'wpr_services_btn_bg_padding',
			[
				'label' => esc_html__('Padding', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em', 'rem', 'custom'],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-service-btn span i, {{WRAPPER}} .wpr-el-service-btn span img , {{WRAPPER}} .wpr-el-service-btn span svg' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * 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();
		$btn_id = 'theme_btn';
?>

		<?php if ($settings['wpr_design_style'] == 'layout-2'): ?>

			<div class="service__items-wrapper wpr-el-section">
				<?php foreach ($settings['wpr_service_slides'] as $key => $item):
					$service_image = $this->tp_get_img($item, 'service_image', 'full', false);
					$service_image_alt = get_post_meta($item["service_image"]["id"], "_wp_attachment_image_alt", true);

					// btn Link
					if ('2' == $item['wpr_btn_link_type']) {
						$link = get_permalink($item['wpr_btn_page_link']);
						$target = '_self';
						$rel = 'nofollow';
					} else {
						$link = !empty($item['wpr_btn_link']['url']) ? $item['wpr_btn_link']['url'] : '';
						$target = !empty($item['wpr_btn_link']['is_external']) ? '_blank' : '';
						$rel = !empty($item['wpr_btn_link']['nofollow']) ? 'nofollow' : '';
					}
				?>
					<div class="service__item">
						<div class="service-content">
							<?php if (!empty($item['service_image'])): ?>
								<div class="content-thumb wpr-el-service-img">
									<img src="<?php echo esc_url($service_image['service_image']); ?>"
										alt="<?php echo esc_attr($service_image_alt); ?>" />
								</div>
							<?php endif; ?>

							<?php if (!empty($item['services_desc'])): ?>
								<p class="wpr-el-rep-desc">
									<?php echo $this->tp_kses($item['services_desc']); ?>
								</p>
							<?php endif; ?>
						</div>

						<div class="service-info fade-anim" data-delay="<?php echo esc_attr($item['service_animation_delay']); ?>">
							<div class="main-info">
								<?php if (!empty($item['service_number'])): ?>
									<span class="service-number wpr-el-rep-number">
										<em>{</em>
										<?php echo $this->tp_kses($item['service_number']); ?>
										<em>}</em>
									</span>
								<?php endif; ?>

								<?php if (!empty($item['service_title'])): ?>
									<h2 class="service-title wpr-el-rep-title">
										<a href="<?php echo esc_url($link); ?>">
											<?php echo $this->tp_kses($item['service_title']); ?>
										</a>
									</h2>
								<?php endif; ?>
							</div>

							<?php if (!empty($item['wpr_btn_link_switcher'])): ?>
								<a href="<?php echo esc_url($link); ?>" class="orvio-btn6 wpr-el-rep-btn">
									<i class="fa-regular fa-arrow-right-long"></i>
								</a>
							<?php endif; ?>
						</div>
					</div>
				<?php endforeach; ?>
			</div>

		<?php elseif ($settings['wpr_design_style'] == 'layout-3'):

			$this->add_render_attribute('title_args', 'class', 'wpr-el-title section-title split-text effect-blur-fade');

			$attrs = $this->tp_get_repeater_links_attr($settings, 'service_link');
			extract($attrs);

			$links_attrs = [
				'href' => $link,
				'target' => $target,
				'rel' => $rel,
			];

			if (!empty($settings['service_shape_img']['url'])) {
				$service_shape_img = !empty($settings['service_shape_img']['id']) ? wp_get_attachment_image_url($settings['service_shape_img']['id']) : $settings['service_shape_img']['url'];
				$service_shape_img_alt = get_post_meta($settings["service_shape_img"]["id"], "_wp_attachment_image_alt", true);
			}
		?>

			<!--================= service section start =================-->
			<section class="service-5 section section-padding-top-bottom move-box-wrap wpr-el-section">
				<div class="container">
					<div class="row g-4 align-items-center">
						<div class="col-md-6">
							<div class="service-5__thumb">
								<?php if (!empty($settings['service_shape_img'])): ?>
									<img src="<?php echo esc_url($service_shape_img); ?>" alt="<?php echo esc_attr($service_shape_img_alt); ?>" class="w-100">
								<?php endif; ?>
								<div class="service-5__thumb-wrapper">
									<?php foreach ($settings['wpr_service_slides'] as $key => $item):
									?>
										<?php if (!empty($item['service_svg'])): ?>
											<div class="service-5__thumb-item">
												<?php echo $this->tp_kses($item['service_svg']); ?>
											</div>
										<?php endif; ?>
									<?php endforeach; ?>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="service-5__content">
								<?php if (!empty($settings['wpr_shape_switcher'])): ?>
									<span class="leap-1 move-item"></span>
									<span class="leap-2 move-item"></span>
								<?php endif; ?>
								<div class="section-header-5">
									<?php if (!empty($settings['wpr_subtitle'])): ?>
										<span class="section-sub-title v2 wpr-el-subtitle">
											<?php echo $this->tp_kses($settings['wpr_subtitle']); ?>
										</span>
									<?php endif; ?>

									<?php if (!empty($settings['wpr_title'])):
										printf(
											'<%1$s %2$s>%3$s</%1$s>',
											tag_escape($settings['wpr_title_tag']),
											$this->get_render_attribute_string('title_args'),
											$this->tp_kses($settings['wpr_title'])
										);
									endif; ?>
								</div>

								<div class="service-5__item-wrapper">
									<?php foreach ($settings['wpr_service_slides'] as $key => $item):

										$counter = $key + 1;

										// btn Link
										if ('2' == $item['wpr_btn_link_type']) {
											$link = get_permalink($item['wpr_btn_page_link']);
											$target = '_self';
											$rel = 'nofollow';
										} else {
											$link = !empty($item['wpr_btn_link']['url']) ? $item['wpr_btn_link']['url'] : '';
											$target = !empty($item['wpr_btn_link']['is_external']) ? '_blank' : '';
											$rel = !empty($item['wpr_btn_link']['nofollow']) ? 'nofollow' : '';
										}
									?>
										<div class="service-5__item" data-index="<?php echo $counter; ?>">
											<div class="item-info">
												<?php if (!empty($item['service_number'])): ?>
													<span class="item-number wpr-el-rep-number">
														<?php echo $this->tp_kses($item['service_number']); ?>
													</span>
												<?php endif; ?>

												<?php if (!empty($item['service_title'])): ?>
													<h5 class="item-title wpr-el-rep-title">
														<?php echo $this->tp_kses($item['service_title']); ?>
													</h5>
												<?php endif; ?>
											</div>
											<div class="item-icon">
												<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23" fill="none">
													<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8857 12.219L3.11511 12.219L3.11511 10.7815L19.8857 10.7815L19.8857 12.219Z" fill="currentColor" />
													<path fill-rule="evenodd" clip-rule="evenodd" d="M19.1671 10.7814C15.7866 10.7814 13.0241 13.7542 13.0241 16.9243L13.0241 17.6431L14.4617 17.6431L14.4617 16.9243C14.4617 14.5174 16.6109 12.2189 19.1671 12.2189L19.886 12.2189L19.886 10.7814L19.1671 10.7814Z" fill="currentColor" />
													<path fill-rule="evenodd" clip-rule="evenodd" d="M19.1669 12.219C15.7863 12.219 13.0239 9.24615 13.0239 6.07608L13.0239 5.35733L14.4614 5.35733L14.4614 6.07608C14.4614 8.48293 16.6106 10.7815 19.1669 10.7815L19.8857 10.7815L19.8857 12.219L19.1669 12.219Z" fill="currentColor" />
												</svg>
											</div>
											<a href="<?php echo esc_url($link); ?>" class="item-link"></a>
										</div>
									<?php endforeach; ?>
								</div>

								<?php if (!empty($settings['wpr_btn_text'])): ?>
									<a <?php echo $this->tp_implode_html_attributes($links_attrs); ?> class="orvio-btn10 wpr-el-rep-btn">
										<?php echo $this->tp_kses($settings['wpr_btn_text']); ?>
									</a>
								<?php endif; ?>
							</div>
						</div>
					</div>
				</div>
				<?php if (!empty($settings['wpr_shape_switcher'])): ?>
					<span class="background-shape"></span>
				<?php endif; ?>
			</section>
			<!--================= service section end =================-->

		<?php elseif ($settings['wpr_design_style'] == 'layout-4'):

		?>

			<div class="service-7__item-wrapper">
				<div class="services-wrapper header-stacking-items">
					<?php foreach ($settings['wpr_service_slides'] as $key => $item):
						// btn Link
						if ('2' == $item['wpr_btn_link_type']) {
							$link = get_permalink($item['wpr_btn_page_link']);
							$target = '_self';
							$rel = 'nofollow';
						} else {
							$link = !empty($item['wpr_btn_link']['url']) ? $item['wpr_btn_link']['url'] : '';
							$target = !empty($item['wpr_btn_link']['is_external']) ? '_blank' : '';
							$rel = !empty($item['wpr_btn_link']['nofollow']) ? 'nofollow' : '';
						}
					?>
						<div class="service-7__item">
							<div class="container">
								<div class="item-header">
									<?php if (!empty($item['service_number'])) : ?>
										<h5 class="item-number wpr-el-rep-number">
											<?php echo $this->tp_kses($item['service_number']); ?>
										</h5>
									<?php endif; ?>

									<div class="title-area">
										<?php if (!empty($item['service_title'])): ?>
											<h2 class="item-title wpr-el-rep-title">
												<a href="<?php echo esc_url($link); ?>">
													<?php echo $this->tp_kses($item['service_title']); ?>
												</a>
											</h2>
										<?php endif; ?>

										<?php if (!empty($item['service_svg'])): ?>
											<div class="item-icon">
												<?php echo $this->tp_kses($item['service_svg']); ?>
											</div>
										<?php endif; ?>
									</div>
								</div>
								<div class="item-content">
									<div class="btn-wrapper"></div>
									<div class="main-content">
										<?php if (!empty($item['services_desc'])): ?>
											<p class="wpr-el-rep-desc">
												<?php echo $this->tp_kses($item['services_desc']); ?>
											</p>
										<?php endif; ?>

										<?php if (!empty($item['nested_items'])) : ?>
											<div class="fetcher-list">
												<ul>
													<?php foreach ($item['nested_items'] as $nested_item) : ?>
														<li class="wpr-el-rep-cat">
															<?php echo esc_html($nested_item['nested_services_title']); ?>
														</li>
													<?php endforeach; ?>
												</ul>
											</div>
										<?php endif; ?>
									</div>
								</div>
							</div>
						</div>
					<?php endforeach; ?>
				</div>
			</div>
			<div class="final"></div>


		<?php elseif ($settings['wpr_design_style'] == 'layout-5'): ?>



			<?php foreach ($settings['wpr_service_slides'] as $key => $item):

				$service_image = $this->tp_get_img($item, 'service_image', 'full', false);
				$service_image_alt = get_post_meta($item["service_image"]["id"], "_wp_attachment_image_alt", true);

				// btn Link
				if ('2' == $item['wpr_btn_link_type']) {
					$link = get_permalink($item['wpr_btn_page_link']);
					$target = '_self';
					$rel = 'nofollow';
				} else {
					$link = !empty($item['wpr_btn_link']['url']) ? $item['wpr_btn_link']['url'] : '';
					$target = !empty($item['wpr_btn_link']['is_external']) ? '_blank' : '';
					$rel = !empty($item['wpr_btn_link']['nofollow']) ? 'nofollow' : '';
				}

			?>

				<div class="wpr-el-section service-2__item v3 fade-right-item">

					<?php if (!empty($item['service_number'])) : ?>
						<span class="service-number wpr-el-rep-number"><?php echo $this->tp_kses($item['service_number']); ?></span>
					<?php endif; ?>

					<?php if (!empty($item['service_title'])) : ?>
						<h3 class="service-title wpr-el-rep-title">
							<a href="<?php echo esc_url($link); ?>" data-text="<?php echo $this->tp_kses($item['service_title']); ?>">
								<?php echo $this->tp_kses($item['service_title']); ?>
							</a>
						</h3>
					<?php endif; ?>

					<?php if (!empty($item['services_desc'])) : ?>
						<p class="wpr-el-rep-desc"><?php echo $this->tp_kses($item['services_desc']); ?></p>
					<?php endif; ?>

					<?php if (!empty($item['service_image'])): ?>
						<div class="service-thumb wpr-el-service-img">
							<img src="<?php echo esc_url($service_image['service_image']); ?>" alt="<?php echo esc_attr($service_image_alt); ?>" class="w-100" />
						</div>
					<?php endif; ?>
				</div>


			<?php endforeach; ?>

		<?php elseif ($settings['wpr_design_style'] == 'layout-6'): ?>

			<div class="service-2__item v3 fade-right-item">
				<span class="service-number">//01</span>
				<h3 class="service-title">
					<a
						href="service-details.html"
						data-text="ART&nbsp;DIRECTION">ART&nbsp;DIRECTION</a>
				</h3>
				<p>
					Brand visual identity creation trend forecasting and
					research shoots design and styling
				</p>
				<div class="service-thumb">
					<img
						src="./assets/images/page-7/services/service-item-thumb-1.png"
						alt="service-item-thumb"
						class="w-100" />
				</div>
			</div>

		<?php elseif ($settings['wpr_design_style'] == 'layout-7'): ?>

			<!-- service area start  -->
			<div class="service-area-2 wpr-el-section">
				<div class="service-area-2-inner">
					<div class="services-wrapper-box fade-anim">
						<div class="services-wrapper service-hover-active">
							<?php foreach ($settings['wpr_service_slides'] as $key => $item):
								$service_image = $this->tp_get_img($item, 'service_image', 'full', false);
								$service_image_alt = get_post_meta($item["service_image"]["id"], "_wp_attachment_image_alt", true);

								$service_shape_image = $this->tp_get_img($item, 'service_shape_img', 'full', false);
								$service_shape_image_alt = get_post_meta($item["service_shape_img"]["id"], "_wp_attachment_image_alt", true);

								// btn Link
								if ('2' == $item['wpr_btn_link_type']) {
									$link = get_permalink($item['wpr_btn_page_link']);
									$target = '_self';
									$rel = 'nofollow';
								} else {
									$link = !empty($item['wpr_btn_link']['url']) ? $item['wpr_btn_link']['url'] : '';
									$target = !empty($item['wpr_btn_link']['is_external']) ? '_blank' : '';
									$rel = !empty($item['wpr_btn_link']['nofollow']) ? 'nofollow' : '';
								}

							?>
								<div class="service-box-2 <?php echo ($item['activate_class'] === 'yes') ? 'active' : ''; ?> elementor-repeater-item-<?php echo esc_attr($item['_id']); ?>">
									<?php if (!empty($item['service_title'])): ?>
										<a href="<?php echo esc_url($link); ?>" target="<?php echo esc_attr($target); ?>" rel="<?php echo esc_attr($rel); ?>">
											<div class="header">
												<h3 class="title wpr-el-rep-title"><?php echo $this->tp_kses($item['service_title']); ?>
													<span class="number wpr-el-rep-number"><?php echo '//' . sprintf("%03d", $key + 1); ?></span>
												</h3>
											</div>
										</a>
									<?php endif; ?>

									<div class="service-box-2-inner">
										<?php if (!empty($item['service_shape_img'])): ?>
											<div class="shape-1">
												<img src="<?php echo esc_url($service_shape_image['service_shape_img']); ?>"
													alt="<?php echo esc_attr($service_shape_image_alt); ?>" />
											</div>
										<?php endif; ?>

										<?php if (!empty($item['service_image'])): ?>
											<div class="thumb wpr-el-service-img">
												<img src="<?php echo esc_url($service_image['service_image']); ?>"
													alt="<?php echo esc_attr($service_image_alt); ?>" />
											</div>
										<?php endif; ?>

										<div class="content">
											<?php if (!empty($item['service_image'])): ?>
												<div class="thumb-2">
													<img src="<?php echo esc_url($service_image['service_image']); ?>"
														alt="<?php echo esc_attr($service_image_alt); ?>" />
												</div>
											<?php endif; ?>

											<?php if (!empty($item['services_desc'])): ?>
												<p class="text wpr-el-rep-desc"><?php echo $this->tp_kses($item['services_desc']); ?></p>
											<?php endif; ?>
										</div>
									</div>
								</div>
							<?php endforeach; ?>
						</div>
					</div>
				</div>
			</div>
			<!-- service area end  -->


		<?php else: ?>

			<?php foreach ($settings['wpr_service_slides'] as $key => $item):

				$service_image = $this->tp_get_img($item, 'service_image', 'full', false);
				$service_image_alt = get_post_meta($item["service_image"]["id"], "_wp_attachment_image_alt", true);

				// btn Link
				if ('2' == $item['wpr_btn_link_type']) {
					$link = get_permalink($item['wpr_btn_page_link']);
					$target = '_self';
					$rel = 'nofollow';
				} else {
					$link = !empty($item['wpr_btn_link']['url']) ? $item['wpr_btn_link']['url'] : '';
					$target = !empty($item['wpr_btn_link']['is_external']) ? '_blank' : '';
					$rel = !empty($item['wpr_btn_link']['nofollow']) ? 'nofollow' : '';
				}
			?>
				<div class="service-2__item fade-right-item">
					<?php if (!empty($item['service_number'])) : ?>
						<span class="service-number wpr-el-rep-number">
							<?php echo $this->tp_kses($item['service_number']); ?>
						</span>
					<?php endif; ?>

					<?php if (!empty($item['service_title'])) : ?>
						<h3 class="service-title wpr-el-rep-title">
							<a href="<?php echo esc_url($link); ?>" data-text="<?php echo $this->tp_kses($item['service_title']); ?>">
								<?php echo $this->tp_kses($item['service_title']); ?>
							</a>
						</h3>
					<?php endif; ?>

					<?php if (!empty($item['services_desc'])) : ?>
						<p class="wpr-el-rep-desc">
							<?php echo $this->tp_kses($item['services_desc']); ?>
						</p>
					<?php endif; ?>

					<?php if (!empty($item['service_image'])): ?>
						<div class="service-thumb wpr-el-service-img">
							<img class="w-100" src="<?php echo esc_url($service_image['service_image']); ?>" alt="<?php echo esc_attr($service_image_alt); ?>" />
						</div>
					<?php endif; ?>
				</div>
			<?php endforeach; ?>




<?php endif;
	}
}


