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

/**
 * Porto Contact Form widget
 *
 * @since 2.4.0
 */

use Elementor\Controls_Manager;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Typography;
use Elementor\Icons_Manager;
use Elementor\Repeater;

class Porto_Elementor_Contact_Form_Widget extends \Elementor\Widget_Base {

	public function get_name() {
		return 'porto_contact_form';
	}

	public function get_title() {
		return __( 'Porto Contact Form', 'porto-functionality' );
	}

	public function get_categories() {
		return array( 'porto-elements' );
	}

	public function get_keywords() {
		return array( 'contact', 'form', 'forms', 'field', 'button', 'submit', 'mail', 'wpform', 'wpforms', 'lite' );
	}

	public function get_icon() {
		return 'eicon-form-horizontal porto-elementor-widget-icon';
	}

	public function has_widget_inner_wrapper(): bool {
		return ! Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}
	
	public function get_custom_help_url() {
		return 'https://www.portotheme.com/wordpress/porto/documentation/contact-form-widget/';
	}

	protected function is_dynamic_content(): bool {
		return true;
	}

	protected function register_controls() {

		$this->start_controls_section(
			'section_contact_form',
			array(
				'label' => __( 'Contact Form', 'porto-functionality' ),
			)
		);

		$this->add_control(
			'source',
			array(
				'type'    => Controls_Manager::SELECT,
				'label'   => __( 'Source', 'porto-functionality' ),
				'default' => '',
				'options' => array(
					''        => __( 'Contact Form 7', 'porto-functionality' ),
					'wpforms' => __( 'WPForms Lite', 'porto-functionality' ),
				),
			)
		);

		$this->add_control(
			'cf7_form',
			array(
				'type'        => 'porto_ajaxselect2',
				'label'       => __( 'Contact Forms', 'porto-functionality' ),
				'options'     => 'wpcf7_contact_form',
				'label_block' => true,
				'condition'   => array(
					'source' => '',
				),
			)
		);

		$this->add_control(
			'wpform',
			array(
				'type'        => 'porto_ajaxselect2',
				'label'       => __( 'Contact Forms', 'porto-functionality' ),
				'options'     => 'wpforms',
				'label_block' => true,
				'condition'   => array(
					'source' => 'wpforms',
				),
			)
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_contact_form_fields',
			array(
				'label' => __( 'Form Fields', 'porto-functionality' ),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'tg',
				'label'    => __( 'Typography', 'porto-functionality' ),
				'selector' => '.elementor-element-{{ID}}, .elementor-element-{{ID}} input, .elementor-element-{{ID}} select, .elementor-element-{{ID}} textarea',
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'lbl_tg',
				'label'    => __( 'Label Typography', 'porto-functionality' ),
				'selector' => '.elementor-element-{{ID}} label, .elementor-element-{{ID}} div.wpforms-container .wpforms-field-label',
			)
		);

		$this->add_control(
			'lbl_mb',
			array(
				'type'       => Controls_Manager::SLIDER,
				'label'      => __( 'Label Bottom Spacing', 'porto-functionality' ),
				'range'      => array(
					'px'  => array(
						'step' => 1,
						'min'  => 0,
						'max'  => 50,
					),
					'em'  => array(
						'step' => 0.1,
						'min'  => 0,
						'max'  => 5,
					),
					'rem' => array(
						'step' => 0.1,
						'min'  => 0,
						'max'  => 5,
					),
				),
				'default'    => array(
					'unit' => 'px',
				),
				'size_units' => array(
					'px',
					'em',
					'rem',
				),
				'selectors'  => array(
					'.elementor-element-{{ID}} label, .elementor-element-{{ID}} .wpforms-field-label' => 'margin-bottom: {{SIZE}}{{UNIT}};--wpforms-field-size-input-spacing: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'ih',
			array(
				'type'       => Controls_Manager::SLIDER,
				'label'      => __( 'The Height of input and select box', 'porto-functionality' ),
				'range'      => array(
					'px'  => array(
						'step' => 1,
						'min'  => 0,
						'max'  => 100,
					),
					'em'  => array(
						'step' => 0.1,
						'min'  => 0,
						'max'  => 10,
					),
					'rem' => array(
						'step' => 0.1,
						'min'  => 0,
						'max'  => 10,
					),
				),
				'default'    => array(
					'unit' => 'px',
				),
				'size_units' => array(
					'px',
					'em',
					'rem',
				),
				'selectors'  => array(
					'.elementor-element-{{ID}} input[type="text"], .elementor-element-{{ID}} input[type="email"], .elementor-element-{{ID}} input[type="date"], .elementor-element-{{ID}} input[type="datetime"], .elementor-element-{{ID}} input[type="number"], .elementor-element-{{ID}} input[type="tel"], .elementor-element-{{ID}} select' => 'height: {{SIZE}}{{UNIT}};--wpforms-field-size-input-height: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_control(
			'tah',
			array(
				'type'       => Controls_Manager::SLIDER,
				'label'      => __( 'The Height of textarea', 'porto-functionality' ),
				'range'      => array(
					'px'  => array(
						'step' => 1,
						'min'  => 0,
						'max'  => 400,
					),
					'em'  => array(
						'step' => 0.1,
						'min'  => 0,
						'max'  => 40,
					),
					'rem' => array(
						'step' => 0.1,
						'min'  => 0,
						'max'  => 40,
					),
				),
				'default'    => array(
					'unit' => 'px',
				),
				'size_units' => array(
					'px',
					'em',
					'rem',
				),
				'selectors'  => array(
					'.elementor-element-{{ID}} textarea' => 'height: {{SIZE}}{{UNIT}};--wpforms-field-size-input-height: calc( {{SIZE}}{{UNIT}} / 2.8 );',
				),
			)
		);

		$this->add_responsive_control(
			'fs',
			array(
				'type'        => Controls_Manager::SLIDER,
				'label'       => __( 'Font Size', 'porto-functionality' ),
				'description' => __( 'Inputs the font size of form and form fields.', 'porto-functionality' ),
				'range'       => array(
					'px'  => array(
						'step' => 1,
						'min'  => 0,
						'max'  => 40,
					),
					'em'  => array(
						'step' => 0.1,
						'min'  => 0,
						'max'  => 5,
					),
					'rem' => array(
						'step' => 0.1,
						'min'  => 0,
						'max'  => 5,
					),
				),
				'default'     => array(
					'unit' => 'px',
				),
				'size_units'  => array(
					'px',
					'em',
					'rem',
				),
				'selectors'   => array(
					'.elementor-element-{{ID}} input[type="text"], .elementor-element-{{ID}} input[type="email"], .elementor-element-{{ID}} input[type="date"], .elementor-element-{{ID}} input[type="datetime"], .elementor-element-{{ID}} input[type="number"], .elementor-element-{{ID}} input[type="tel"], .elementor-element-{{ID}} textarea, .elementor-element-{{ID}} .form-control, .elementor-element-{{ID}} select' => 'font-size: {{SIZE}}{{UNIT}};--wpforms-field-size-font-size: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_control(
			'clr',
			array(
				'type'        => Controls_Manager::COLOR,
				'label'       => __( 'Text Color', 'porto-functionality' ),
				'description' => __( 'Controls the color of the form and form fields.', 'porto-functionality' ),
				'selectors'   => array(
					'.elementor-element-{{ID}} input[type="text"], .elementor-element-{{ID}} input[type="email"], .elementor-element-{{ID}} input[type="date"], .elementor-element-{{ID}} input[type="datetime"], .elementor-element-{{ID}} input[type="number"], .elementor-element-{{ID}} input[type="tel"], .elementor-element-{{ID}} textarea, .elementor-element-{{ID}} .form-control, .elementor-element-{{ID}} select' => 'color: {{VALUE}};--wpforms-field-text-color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'ph_clr',
			array(
				'type'        => Controls_Manager::COLOR,
				'label'       => __( 'Placeholder Color', 'porto-functionality' ),
				'description' => __( 'Controls the placeholder color of form fields.', 'porto-functionality' ),
				'selectors'   => array(
					'.elementor-element-{{ID}} input[type="text"]::placeholder, .elementor-element-{{ID}} input[type="email"]::placeholder, .elementor-element-{{ID}} textarea::placeholder, .elementor-element-{{ID}} .form-control::placeholder' => 'color: {{VALUE}};',
					'.elementor-element-{{ID}} div.wpforms-container input::placeholder,.elementor-element-{{ID}} div.wpforms-container select::placeholder, .elementor-element-{{ID}} div.wpforms-container textarea::placeholder' => 'color: {{VALUE}} !important; opacity: 1 !important;',
				),
			)
		);

		$this->add_control(
			'field_bgc',
			array(
				'type'        => Controls_Manager::COLOR,
				'label'       => __( 'Form Field Background Color', 'porto-functionality' ),
				'description' => __( 'Controls the background color of form fields such as input and select boxes.', 'porto-functionality' ),
				'selectors'   => array(
					'.elementor-element-{{ID}} input[type="text"], .elementor-element-{{ID}} input[type="email"], .elementor-element-{{ID}} input[type="date"], .elementor-element-{{ID}} input[type="datetime"], .elementor-element-{{ID}} input[type="number"], .elementor-element-{{ID}} input[type="tel"], .elementor-element-{{ID}} textarea, .elementor-element-{{ID}} .form-control, .elementor-element-{{ID}} select' => 'background-color: {{VALUE}};--wpforms-field-background-color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'field_bw',
			array(
				'type'        => Controls_Manager::DIMENSIONS,
				'label'       => __( 'Form Field Border Width (px)', 'porto-functionality' ),
				'description' => __( 'Controls the border size of the form fields such as input and select boxes.', 'porto-functionality' ),
				'selectors'   => array(
					'.elementor-element-{{ID}} input[type="text"], .elementor-element-{{ID}} input[type="email"], .elementor-element-{{ID}} input[type="date"], .elementor-element-{{ID}} input[type="datetime"], .elementor-element-{{ID}} input[type="number"], .elementor-element-{{ID}} input[type="tel"], .elementor-element-{{ID}} textarea, .elementor-element-{{ID}} .form-control, .elementor-element-{{ID}} select' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};--wpforms-field-border-size: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'size_units'  => array( 'px' ),
			)
		);

		$this->add_control(
			'field_bc',
			array(
				'type'        => Controls_Manager::COLOR,
				'label'       => __( 'Form Field Border Color', 'porto-functionality' ),
				'description' => __( 'Controls the border color of form fields such as input and select boxes.', 'porto-functionality' ),
				'selectors'   => array(
					'.elementor-element-{{ID}} input[type="text"], .elementor-element-{{ID}} input[type="email"], .elementor-element-{{ID}} input[type="date"], .elementor-element-{{ID}} input[type="datetime"], .elementor-element-{{ID}} input[type="number"], .elementor-element-{{ID}} input[type="tel"], .elementor-element-{{ID}} textarea, .elementor-element-{{ID}} .form-control, .elementor-element-{{ID}} select' => 'border-color: {{VALUE}};--wpforms-field-border-color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'field_bcf',
			array(
				'type'        => Controls_Manager::COLOR,
				'label'       => __( 'Form Field Border Color on Focus', 'porto-functionality' ),
				'description' => __( 'Controls the border color of form fields such as input and select boxes on focus status.', 'porto-functionality' ),
				'selectors'   => array(
					'.elementor-element-{{ID}} input[type="text"]:focus, .elementor-element-{{ID}} input[type="email"]:focus, .elementor-element-{{ID}} textarea:focus, .elementor-element-{{ID}} .form-control:focus, .elementor-element-{{ID}} select:focus' => 'border-color: {{VALUE}};--wpforms-button-background-color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'br',
			array(
				'type'        => Controls_Manager::DIMENSIONS,
				'label'       => __( 'Form Field Border Radius (px)', 'porto-functionality' ),
				'description' => __( 'Controls the border radius of form fields such as input, select boxes and buttons.', 'porto-functionality' ),
				'selectors'   => array(
					'.elementor-element-{{ID}} input, .elementor-element-{{ID}} textarea, .elementor-element-{{ID}} .form-control, .elementor-element-{{ID}} select' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};--wpforms-field-border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'size_units'  => array( 'px' ),
			)
		);

		$this->add_responsive_control(
			'form_space',
			array(
				'type'       => Controls_Manager::DIMENSIONS,
				'label'      => __( 'Form Field Padding(px)', 'porto-functionality' ),
				'selectors'  => array(
					'{{WRAPPER}} input[type="email"],{{WRAPPER}} input[type="number"],{{WRAPPER}} input[type="password"],{{WRAPPER}} input[type="search"],{{WRAPPER}} input[type="tel"],{{WRAPPER}} input[type="text"],{{WRAPPER}} input[type="url"],{{WRAPPER}} input[type="color"],{{WRAPPER}} input[type="date"],{{WRAPPER}} input[type="datetime"],{{WRAPPER}} input[type="datetime-local"],{{WRAPPER}} input[type="month"],{{WRAPPER}} input[type="time"],{{WRAPPER}} input[type="week"],{{WRAPPER}} textarea,{{WRAPPER}} .form-control,{{WRAPPER}} select' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'size_units' => array( 'px' ),
			)
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_contact_form_buttons',
			array(
				'label' => __( 'Buttons', 'porto-functionality' ),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'btn_tg',
				'label'    => __( 'Typography', 'porto-functionality' ),
				'selector' => '.elementor-element-{{ID}} button, .elementor-element-{{ID}} .btn, .elementor-element-{{ID}} input[type="submit"], .elementor-element-{{ID}} input[type="button"], .elementor-element-{{ID}} .wpforms-container button[type="submit"]',
			)
		);

		$this->add_responsive_control(
			'bh',
			array(
				'type'       => Controls_Manager::SLIDER,
				'label'      => __( 'The Height of Buttons', 'porto-functionality' ),
				'range'      => array(
					'px'  => array(
						'step' => 1,
						'min'  => 0,
						'max'  => 100,
					),
					'em'  => array(
						'step' => 0.1,
						'min'  => 0,
						'max'  => 10,
					),
					'rem' => array(
						'step' => 0.1,
						'min'  => 0,
						'max'  => 10,
					),
				),
				'default'    => array(
					'unit' => 'px',
				),
				'size_units' => array(
					'px',
					'em',
					'rem',
				),
				'selectors'  => array(
					'.elementor-element-{{ID}} button, .elementor-element-{{ID}} .btn, .elementor-element-{{ID}} input[type="submit"], .elementor-element-{{ID}} input[type="button"]' => '--wpforms-button-size-height: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'btn_pd',
			array(
				'type'       => Controls_Manager::DIMENSIONS,
				'label'      => __( 'Padding', 'porto-functionality' ),
				'selectors'  => array(
					'.elementor-element-{{ID}} .wpforms-container button[type="submit"], .elementor-element-{{ID}} button, .elementor-element-{{ID}} .btn, .elementor-element-{{ID}} input[type="submit"], .elementor-element-{{ID}} input[type="button"]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'size_units' => array( 'px', 'em', 'rem' ),
			)
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'btn_bd',
				'selector' => '.elementor-element-{{ID}} .wpforms-container button[type="submit"], .elementor-element-{{ID}} button, .elementor-element-{{ID}} .btn, .elementor-element-{{ID}} input[type="submit"], .elementor-element-{{ID}} input[type="button"]',
				'exclude'  => array(
					'color',
				),
			)
		);

		$this->add_control(
			'btn_br',
			array(
				'type'       => Controls_Manager::DIMENSIONS,
				'label'      => __( 'Border Radius (px)', 'porto-functionality' ),
				'selectors'  => array(
					'.elementor-element-{{ID}} button, .elementor-element-{{ID}} .btn, .elementor-element-{{ID}} input[type="submit"], .elementor-element-{{ID}} input[type="button"]' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};--wpforms-button-border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'size_units' => array( 'px' ),
			)
		);

		$this->start_controls_tabs( 'tabs_btn_style' );

		$this->start_controls_tab(
			'tabs_btn_normal',
			array(
				'label' => __( 'Normal', 'porto-functionality' ),
			)
		);

		$this->add_control(
			'btn_bgc',
			array(
				'label'     => __( 'Background Color', 'porto-functionality' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'.elementor-element-{{ID}} button, .elementor-element-{{ID}} .btn, .elementor-element-{{ID}} input[type="submit"], .elementor-element-{{ID}} input[type="button"]' => '--wpforms-button-background-color: {{VALUE}};background-color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'btn_clr',
			array(
				'label'     => __( 'Text Color', 'porto-functionality' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'.elementor-element-{{ID}} button, .elementor-element-{{ID}} .btn, .elementor-element-{{ID}} input[type="submit"], .elementor-element-{{ID}} input[type="button"]' => '--wpforms-button-text-color: {{VALUE}};color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'btn_bc',
			array(
				'label'     => __( 'Border Color', 'porto-functionality' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'.elementor-element-{{ID}} button, .elementor-element-{{ID}} .btn, .elementor-element-{{ID}} input[type="submit"], .elementor-element-{{ID}} input[type="button"]' => '--wpforms-button-border-color: {{VALUE}};border-color: {{VALUE}};',
				),
				'condition' => array(
					'btn_bd_border!' => '',
				),
			)
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_btn_hover',
			array(
				'label' => __( 'Hover', 'porto-functionality' ),
			)
		);

		$this->add_control(
			'btn_hover_bgc',
			array(
				'label'     => __( 'Background Color', 'porto-functionality' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'.elementor-element-{{ID}} .wpforms-container button[type="submit"]:hover, .elementor-element-{{ID}} button:hover, .elementor-element-{{ID}} .btn:hover, .elementor-element-{{ID}} input[type="submit"]:hover, .elementor-element-{{ID}} input[type="button"]:hover' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'btn_hover_clr',
			array(
				'label'     => __( 'Text Color', 'porto-functionality' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'.elementor-element-{{ID}} .wpforms-container button[type="submit"]:hover, .elementor-element-{{ID}} button:hover, .elementor-element-{{ID}} .btn:hover, .elementor-element-{{ID}} input[type="submit"]:hover, .elementor-element-{{ID}} input[type="button"]:hover' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'btn_hover_bc',
			array(
				'label'     => __( 'Border Color', 'porto-functionality' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'.elementor-element-{{ID}} .wpforms-container button[type="submit"]:hover, .elementor-element-{{ID}} button:hover, .elementor-element-{{ID}} .btn:hover, .elementor-element-{{ID}} input[type="submit"]:hover, .elementor-element-{{ID}} input[type="button"]:hover' => 'border-color: {{VALUE}};',
				),
				'condition' => array(
					'btn_bd_border!' => '',
				),
			)
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'section_contact_form_messages',
			array(
				'label' => __( 'Messages', 'porto-functionality' ),
			)
		);

		$this->add_control(
			'error_heading',
			array(
				'label'     => __( 'Error Message', 'porto-functionality' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'error_tg',
				'label'    => __( 'Typography', 'porto-functionality' ),
				'selector' => '.elementor-element-{{ID}} div.wpforms-container .wpforms-form label.wpforms-error, .elementor-element-{{ID}} div.wpforms-container .wpforms-form em.wpforms-error, .elementor-element-{{ID}} .wpcf7-not-valid-tip',
			)
		);

		$this->add_control(
			'error_clr',
			array(
				'label'     => __( 'Color', 'porto-functionality' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'.elementor-element-{{ID}} label.wpforms-error, .elementor-element-{{ID}} em.wpforms-error, .elementor-element-{{ID}} .wpcf7-not-valid-tip' => 'color: {{VALUE}};--wpforms-label-error-color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'msg_heading',
			array(
				'label'     => __( 'General Message', 'porto-functionality' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'msg_tg',
				'label'    => __( 'Typography', 'porto-functionality' ),
				'selector' => '.elementor-element-{{ID}} .wpforms-confirmation-container-full, .elementor-element-{{ID}} form .wpcf7-response-output',
			)
		);

		$this->add_control(
			'msg_clr',
			array(
				'label'     => __( 'Text Color', 'porto-functionality' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'.elementor-element-{{ID}} div.wpforms-container-full .wpforms-confirmation-container-full p, .elementor-element-{{ID}} div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) p, .elementor-element-{{ID}} form .wpcf7-response-output' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'msg_bgc',
			array(
				'label'     => __( 'Background Color', 'porto-functionality' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'.elementor-element-{{ID}} div.wpforms-container-full .wpforms-confirmation-container-full,.elementor-element-{{ID}} div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message), .elementor-element-{{ID}} form .wpcf7-response-output' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'msg_bd',
				'selector' => '.elementor-element-{{ID}} div.wpforms-container-full .wpforms-confirmation-container-full,.elementor-element-{{ID}} div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message), .elementor-element-{{ID}} form.wpcf7-form .wpcf7-response-output',
			)
		);

		$this->end_controls_section();
	}

	protected function render() {
		$atts = $this->get_settings_for_display();

		if ( $template = porto_shortcode_template( 'porto_contact_form' ) ) {
			include $template;
		}
	}
}
