<?php
namespace EcafeAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
use Elementor\Group_Control_Typography;
use Elementor\Core\Schemes\Typography;
use Elementor\Scheme_Color;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;

use EcafeAddons\EcafeElementLoad;

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

class Ecafe_Whatsapp extends Widget_Base {

	public function get_name() {
		return 'ecafe-whatsapp';
	}

	public function get_title() {
		return esc_html__( 'Whatsapp', 'essential-classy-addons-for-elementor' );
	}

	public function get_icon() {
		return 'ecafe-ele-back-icon ecafe-whatsapp-icon';
	}

	public function get_categories() {
		return array( 'essential' );
	}

	public function get_keywords() {
		return array( 'whatsapp', 'whats app' );
	}

	public function get_script_depends() {
		return array( 'font-awesome-5-all', 'ecafe-whatsapp' );
	}
	public function get_custom_help_url() {
		return 'https://store.kapasias.com/helpdesk/';
	}
	public function has_widget_inner_wrapper(): bool {
		return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}
	protected function register_controls() {

		$this->start_controls_section(
			'contentSection',
			array(
				'label' => esc_html__( 'Whatsapp', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'wpImage',
			array(
				'label'   => esc_html__( 'Logo', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::MEDIA,
				'default' => array(
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				),
			)
		);
		$this->add_control(
			'wpLabel',
			array(
				'label'       => esc_html__( 'Label', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => esc_html__( 'KAP ASIAs', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter label', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),

			)
		);
		$this->add_control(
			'wpDislayMsg',
			array(
				'label'       => esc_html__( 'Display Message', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => 'Hi there 👋 <br/> <br/>How can I help you? <br/><br/>',
				'placeholder' => esc_html__( 'Enter Message', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),

			)
		);
		$this->add_control(
			'wpPlaceholder',
			array(
				'label'       => esc_html__( 'Placeholder', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => esc_html__( 'Write a response', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Text', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),

			)
		);
		$this->add_control(
			'wpNumber',
			array(
				'label'       => esc_html__( 'Number', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'placeholder' => esc_html__( 'Enter Number', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),

			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'chatButtonSection',
			array(
				'label' => esc_html__( 'Chat Button', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'wpCbText',
			array(
				'label'       => esc_html__( 'Text', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => esc_html__( 'Chat with Us', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Text', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),

			)
		);
		$this->add_control(
			'wpCbIcon',
			array(
				'label'   => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::ICONS,
				'default' => array(
					'value'   => 'fab fa-whatsapp',
					'library' => 'brands',
				),
			)
		);
		$this->end_controls_section();

		/*Notice panel*/
		$ecwidgetdemolink = esc_url( 'https://ecaddons.com/elements/whatsapp/' );
		$ecwidgetdoclink  = esc_url( 'https://ecaddons.com/docs/whatsapp-widget-tutorial/' );
		include ECAFE_PATH . 'element/widgets/ecafe-widgetpanel-help.php';

		/*button style start*/
		$this->start_controls_section(
			'buttonStyling',
			array(
				'label' => esc_html__( 'Button', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'bPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'bPositionBottom',
			array(
				'label'      => esc_html__( 'Bottom Position', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 200,
					),
				),
				'default'    => array(
					'size' => 25,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button' => 'bottom: {{SIZE}}px;',
				),
			)
		);
		$this->add_responsive_control(
			'bPositionRight',
			array(
				'label'      => esc_html__( 'Right Position', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 200,
					),
				),
				'default'    => array(
					'size' => 30,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button' => 'right: {{SIZE}}px;',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'bTypography',
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button',
			)
		);
		$this->add_responsive_control(
			'bIconSizeSvg',
			array(
				'label'      => esc_html__( 'SVG Icon Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 200,
					),
				),
				'default'    => array(
					'size' => 10,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button svg' => 'width: {{SIZE}}px;height: {{SIZE}}px;',
				),
			)
		);
		$this->add_responsive_control(
			'bIconGap',
			array(
				'label'      => esc_html__( 'Icon Gap', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 200,
					),
				),
				'default'    => array(
					'size' => 10,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button i,
					{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button svg' => 'margin-left: {{SIZE}}px;',
				),
			)
		);
		$this->start_controls_tabs( 'tabsButtontyle' );
		$this->start_controls_tab(
			'tabButtonN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'buttonColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'buttonBackgroundN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'buttonBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button',
			)
		);
		$this->add_responsive_control(
			'buttonBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'buttonShadowN',
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabButtonH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'buttonColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button:hover' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button:hover svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'buttonBackgroundH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'buttonBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button:hover',
			)
		);
		$this->add_responsive_control(
			'buttonBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'buttonShadowH',
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-chat-button:hover',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*button style end*/

		/*head style start*/
		$this->start_controls_section(
			'headStyling',
			array(
				'label' => esc_html__( 'Head', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'headPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .whatsapp-chat-head' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'headBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .whatsapp-chat-head',
			)
		);
		$this->end_controls_section();
		/*head style end*/

		/*head image style start*/
		$this->start_controls_section(
			'headImageStyling',
			array(
				'label' => esc_html__( 'Head Image', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'headImgPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-whasapp-wrapper-avatar img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'headImgWidth',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 1,
						'max'  => 250,
						'step' => 1,
					),
				),
				'default'    => array(
					'size' => 50,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-whasapp-wrapper-avatar img' => 'width: {{SIZE}}px;',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'headImgBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .ec-whasapp-wrapper-avatar img',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'headImgBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .ec-whasapp-wrapper-avatar img',
			)
		);
		$this->add_responsive_control(
			'headImgBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-whasapp-wrapper-avatar img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'headImgShadow',
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .ec-whasapp-wrapper-avatar img',
			)
		);
		$this->end_controls_section();
		/*head image style end*/

		/*head name style start*/
		$this->start_controls_section(
			'headNameStyling',
			array(
				'label' => esc_html__( 'Head Name', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'headNamePadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .whatsapp-chat-head .ec-whasapp-wrapper-name' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'headNameMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .whatsapp-chat-head .ec-whasapp-wrapper-name' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'headNameTypography',
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .whatsapp-chat-head .ec-whasapp-wrapper-name',
			)
		);
		$this->add_control(
			'headNameColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .whatsapp-chat-head .ec-whasapp-wrapper-name' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'headNameBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .whatsapp-chat-head .ec-whasapp-wrapper-name',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'headNameBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .whatsapp-chat-head .ec-whasapp-wrapper-name',
			)
		);
		$this->add_responsive_control(
			'headNameBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .whatsapp-chat-head .ec-whasapp-wrapper-name' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'headNameShadow',
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .whatsapp-chat-head .ec-whasapp-wrapper-name',
			)
		);
		$this->end_controls_section();
		/*head name style end*/

		/*head close button style start*/
		$this->start_controls_section(
			'headCloseStyling',
			array(
				'label' => esc_html__( 'Head Close Button', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'headClosePadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-close-chat' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'headCloseMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-close-chat' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'headCloseSize',
			array(
				'label'      => esc_html__( 'Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 100,
					),
				),
				'default'    => array(
					'size' => 30,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-close-chat' => 'font-size: {{SIZE}}px;',
				),
			)
		);
		$this->start_controls_tabs( 'tabsheadCloseStyle' );
		$this->start_controls_tab(
			'tabheadCloseN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'headCloseColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-close-chat' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'headCloseBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-close-chat',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'headCloseBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-close-chat',
			)
		);
		$this->add_responsive_control(
			'headCloseBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-close-chat' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'headCloseShadowN',
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-close-chat',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabheadCloseH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'headCloseColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-close-chat:hover' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'headClosebgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-close-chat:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'headCloseBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-close-chat:hover',
			)
		);
		$this->add_responsive_control(
			'headCloseBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-close-chat:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'headCloseShadowH',
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main a.ec-wp-close-chat:hover',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*head close button style end*/

		/*message style start*/
		$this->start_controls_section(
			'messageStyling',
			array(
				'label' => esc_html__( 'Message', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'messageMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-start-chat' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'messageTypography',
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-start-chat',
			)
		);
		$this->add_control(
			'messageColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-start-chat' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'messageBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg textarea#ec-wp-chat-input',
			)
		);
		$this->end_controls_section();
		/*message style end*/

		/*text input style start*/
		$this->start_controls_section(
			'textInputStyling',
			array(
				'label' => esc_html__( 'Text Input', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'textInputTypography',
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg textarea#ec-wp-chat-input',
			)
		);
		$this->add_control(
			'textInputColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg textarea#ec-wp-chat-input' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'textInputPhcolor',
			array(
				'label'     => esc_html__( 'Placeholder Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg textarea#ec-wp-chat-input::placeholder' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'textInputBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg textarea#ec-wp-chat-input',
			)
		);
		$this->end_controls_section();
		/*text input style end*/

		/*send button style start*/
		$this->start_controls_section(
			'sendButtonStyling',
			array(
				'label' => esc_html__( 'Send Button', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'sendButtonPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'sendButtonMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'sendButtonSvgSize',
			array(
				'label'      => esc_html__( 'SVG Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 200,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it svg' => 'width: {{SIZE}}px;',
				),
			)
		);
		$this->start_controls_tabs( 'tabssendButtonStyle' );
		$this->start_controls_tab(
			'tabsendButtonN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'sendButtonColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'sendButtonBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'sendButtonBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it',
			)
		);
		$this->add_responsive_control(
			'sendButtonBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'sendButtonShadowN',
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabsendButtonH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'sendButtonColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it:hover' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it:hover svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'sendButtonbgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'sendButtonBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it:hover',
			)
		);
		$this->add_responsive_control(
			'sendButtonBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'sendButtonShadowH',
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main .ec-wp-msg a#ec-wp-send-it:hover',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*send button style end*/

		/*box style start*/
		$this->start_controls_section(
			'boxStyling',
			array(
				'label' => esc_html__( 'Box', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'boxWidth',
			array(
				'label'      => esc_html__( 'Max. Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 1000,
					),
				),
				'default'    => array(
					'size' => 350,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main #ec-whasapp-wrapper' => 'width: {{SIZE}}px;',
				),
			)
		);
		$this->add_responsive_control(
			'boxPositionBottom',
			array(
				'label'      => esc_html__( 'Bottom Position', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 200,
					),
				),
				'default'    => array(
					'size' => 90,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main #ec-whasapp-wrapper' => 'bottom: {{SIZE}}px;',
				),
			)
		);
		$this->add_responsive_control(
			'boxPositionRight',
			array(
				'label'      => esc_html__( 'Right Position', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 200,
					),
				),
				'default'    => array(
					'size' => 30,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main #ec-whasapp-wrapper' => 'right: {{SIZE}}px;',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'boxbg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main #ec-whasapp-wrapper',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'boxBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main #ec-whasapp-wrapper',
			)
		);
		$this->add_responsive_control(
			'boxBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-whasapp-wrapper-main #ec-whasapp-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'boxShadow',
				'selector' => '{{WRAPPER}} .ec-whasapp-wrapper-main #ec-whasapp-wrapper',
			)
		);
		$this->end_controls_section();
		/*box style end*/
	}

	protected function render() {

		$settings  = $this->get_settings_for_display();
		$wpCbText  = ! empty( $settings['wpCbText'] ) ? $settings['wpCbText'] : '';
		$image_src = $image = $icon = '';
		if ( ! empty( $settings['wpImage']['id'] ) ) {
			$image_id  = $settings['wpImage']['id'];
			$image_src = wp_get_attachment_image_src( $image_id, 'full' );
			$image_src = $image_src[0];
			$image     = '<img src="' . esc_url( $image_src ) . '">';
		}
		$wpLabel       = ! empty( $settings['wpLabel'] ) ? wp_kses_post( $settings['wpLabel'] ) : '';
		$wpDislayMsg   = ! empty( $settings['wpDislayMsg'] ) ? $settings['wpDislayMsg'] : '';
		$wpNumber      = ! empty( $settings['wpNumber'] ) ? $settings['wpNumber'] : '';
		$wpPlaceholder = ! empty( $settings['wpPlaceholder'] ) ? $settings['wpPlaceholder'] : '';
		if ( ! empty( $settings['wpCbIcon'] ) ) {
			ob_start();
			\Elementor\Icons_Manager::render_icon( $settings['wpCbIcon'], array( 'aria-hidden' => 'true' ) );
			$icon = ob_get_contents();
			ob_end_clean();
		}
		?>
		<div class="ec-whasapp-wrapper-main">
			
		<div id='ec-whasapp-wrapper' class='ec-wp-hide'>
			<a class='ec-wp-close-chat' href='javascript:void'>×</a>
			<div class='whatsapp-chat-head'>
				<div class='ec-whasapp-wrapper-avatar'>
					<?php echo $image; ?>
				</div>
				<div class="ec-whasapp-wrapper-name"><?php echo $wpLabel; ?></div>
			</div>
  
			<div class='ec-wp-start-chat'><?php echo wp_kses_post( $wpDislayMsg ); ?></div>

			<div class='ec-wp-msg'>
				<textarea id='ec-wp-chat-input' placeholder='<?php echo esc_attr( $wpPlaceholder ); ?>'></textarea>
				<a href='javascript:void;' id='ec-wp-send-it'><svg viewBox="0 0 448 448"><path d="M.213 32L0 181.333 320 224 0 266.667.213 416 448 224z"/></svg></a>
			</div>
		</div>
		<div id='ec-wp-get-number'><?php echo esc_html( $wpNumber ); ?></div>		
		<a class='ec-wp-chat-button' href='javascript:void' title='Show Chat'><?php echo wp_kses_post( $wpCbText ) . $icon; ?></a>
		</div>
		<?php
	}
}
