<?php
namespace PKAEElementorPowerKitWidgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
use Elementor\Icons_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Text_Shadow;

if ( ! defined( 'ABSPATH' ) ) exit;

class Modal_Popup extends Widget_Base {

	public function __construct( $data = [], $args = null ) {
		parent::__construct( $data, $args );
		wp_register_style( 'pkae-modal-popup', plugins_url( 'assets/css/pkae-modal-popup.css', __FILE__ ), [], PKAE_ELEMENTOR_POWERKIT_ADDONS_VERSION );
		wp_register_script( 'pkae-modal-popup', plugins_url( 'assets/js/pkae-modal-popup.js', __FILE__ ), [ 'jquery' ], PKAE_ELEMENTOR_POWERKIT_ADDONS_VERSION, true );
	}

	public function get_name()          { return 'pkae-modal-popup'; }
	public function get_title()         { return esc_html__( 'Modal Popup', 'powerkit-addons-for-elementor' ); }
	public function get_icon()          { return 'eicon-lightbox'; }
	public function get_categories()    { return [ 'powerkit-addons-for-elementor' ]; }
	public function get_style_depends() { return [ 'pkae-modal-popup' ]; }
	public function get_script_depends(){ return [ 'pkae-modal-popup' ]; }
	public function get_keywords()      { return [ 'modal', 'popup', 'lightbox', 'overlay', 'dialog', 'powerkit' ]; }

	protected function register_controls() {

		// ── MODAL CONTENT ─────────────────────────────────────────────────────
		$this->start_controls_section( 'section_modal', [
			'label' => esc_html__( 'Modal', 'powerkit-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_CONTENT,
		] );

		$this->add_control( 'preview_modal', [
			'label'        => esc_html__( 'Preview Modal', 'powerkit-addons-for-elementor' ),
			'type'         => Controls_Manager::SWITCHER,
			'return_value' => 'yes',
			'default'      => 'no',
			'description'  => esc_html__( 'Enable to preview the modal in the editor.', 'powerkit-addons-for-elementor' ),
		] );

		$this->add_control( 'modal_title', [
			'label'       => esc_html__( 'Title', 'powerkit-addons-for-elementor' ),
			'type'        => Controls_Manager::TEXT,
			'default'     => esc_html__( 'Modal Title', 'powerkit-addons-for-elementor' ),
			'label_block' => true,
			'dynamic'     => [ 'active' => true ],
		] );

		$this->add_control( 'show_title', [
			'label'        => esc_html__( 'Show Title', 'powerkit-addons-for-elementor' ),
			'type'         => Controls_Manager::SWITCHER,
			'return_value' => 'yes',
			'default'      => 'yes',
		] );

		$this->add_responsive_control( 'modal_width', [
			'label'      => esc_html__( 'Modal Width', 'powerkit-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'vw' ],
			'range'      => [ 'px' => [ 'min' => 200, 'max' => 1400 ], '%' => [ 'min' => 10, 'max' => 100 ] ],
			'default'    => [ 'size' => 600, 'unit' => 'px' ],
		] );

		$this->add_control( 'appear_effect', [
			'label'   => esc_html__( 'Appear Effect', 'powerkit-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'default' => 'fade',
			'options' => [
				'fade'      => esc_html__( 'Fade', 'powerkit-addons-for-elementor' ),
				'slide-up'  => esc_html__( 'Slide Up', 'powerkit-addons-for-elementor' ),
				'slide-down'=> esc_html__( 'Slide Down', 'powerkit-addons-for-elementor' ),
				'zoom-in'   => esc_html__( 'Zoom In', 'powerkit-addons-for-elementor' ),
				'zoom-out'  => esc_html__( 'Zoom Out', 'powerkit-addons-for-elementor' ),
				'flip'      => esc_html__( 'Flip', 'powerkit-addons-for-elementor' ),
			],
		] );

		$this->end_controls_section();

		// ── CONTENT ───────────────────────────────────────────────────────────
		$this->start_controls_section( 'section_content', [
			'label' => esc_html__( 'Content', 'powerkit-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_CONTENT,
		] );

		$this->add_control( 'content_type', [
			'label'   => esc_html__( 'Content Type', 'powerkit-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'default' => 'content',
			'options' => [
				'content'  => esc_html__( 'Content / HTML', 'powerkit-addons-for-elementor' ),
				'photo'    => esc_html__( 'Photo', 'powerkit-addons-for-elementor' ),
				'youtube'  => esc_html__( 'YouTube', 'powerkit-addons-for-elementor' ),
				'vimeo'    => esc_html__( 'Vimeo', 'powerkit-addons-for-elementor' ),
				'video'    => esc_html__( 'Video Embed Code', 'powerkit-addons-for-elementor' ),
				'template' => esc_html__( 'Saved Template', 'powerkit-addons-for-elementor' ),
				'iframe'   => esc_html__( 'iFrame', 'powerkit-addons-for-elementor' ),
			],
		] );

		$this->add_control( 'content_text', [
			'label'     => esc_html__( 'Content', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::WYSIWYG,
			'default'   => esc_html__( 'Add your modal content here. You can add text, images, and more.', 'powerkit-addons-for-elementor' ),
			'condition' => [ 'content_type' => 'content' ],
		] );

		$this->add_control( 'content_photo', [
			'label'     => esc_html__( 'Photo', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::MEDIA,
			'default'   => [ 'url' => Utils::get_placeholder_image_src() ],
			'condition' => [ 'content_type' => 'photo' ],
		] );

		$this->add_control( 'youtube_url', [
			'label'       => esc_html__( 'YouTube URL', 'powerkit-addons-for-elementor' ),
			'type'        => Controls_Manager::TEXT,
			'placeholder' => 'https://www.youtube.com/watch?v=...',
			'label_block' => true,
			'condition'   => [ 'content_type' => 'youtube' ],
		] );

		$this->add_control( 'vimeo_url', [
			'label'       => esc_html__( 'Vimeo URL', 'powerkit-addons-for-elementor' ),
			'type'        => Controls_Manager::TEXT,
			'placeholder' => 'https://vimeo.com/...',
			'label_block' => true,
			'condition'   => [ 'content_type' => 'vimeo' ],
		] );

		$this->add_control( 'video_embed', [
			'label'     => esc_html__( 'Video Embed Code', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::TEXTAREA,
			'rows'      => 4,
			'condition' => [ 'content_type' => 'video' ],
		] );

		$this->add_control( 'content_template', [
			'label'     => esc_html__( 'Select Template', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::SELECT,
			'options'   => $this->get_elementor_templates(),
			'condition' => [ 'content_type' => 'template' ],
		] );

		$this->add_control( 'iframe_url', [
			'label'       => esc_html__( 'iFrame URL', 'powerkit-addons-for-elementor' ),
			'type'        => Controls_Manager::TEXT,
			'placeholder' => 'https://',
			'label_block' => true,
			'condition'   => [ 'content_type' => 'iframe' ],
		] );

		$this->add_responsive_control( 'iframe_height', [
			'label'     => esc_html__( 'iFrame Height', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::SLIDER,
			'range'     => [ 'px' => [ 'min' => 100, 'max' => 1000 ] ],
			'default'   => [ 'size' => 400 ],
			'condition' => [ 'content_type' => 'iframe' ],
		] );

		$this->add_responsive_control( 'content_padding', [
			'label'      => esc_html__( 'Content Padding', 'powerkit-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', 'em', 'rem' ],
			'default'    => [ 'top' => '30', 'right' => '30', 'bottom' => '30', 'left' => '30', 'unit' => 'px' ],
			'separator'  => 'before',
		] );

		$this->end_controls_section();

		// ── CLOSE BUTTON ──────────────────────────────────────────────────────
		$this->start_controls_section( 'section_close', [
			'label' => esc_html__( 'Close Button', 'powerkit-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_CONTENT,
		] );

		$this->add_control( 'close_type', [
			'label'   => esc_html__( 'Close Button Type', 'powerkit-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'default' => 'icon',
			'options' => [
				'icon'  => esc_html__( 'Icon', 'powerkit-addons-for-elementor' ),
				'image' => esc_html__( 'Image', 'powerkit-addons-for-elementor' ),
				'text'  => esc_html__( 'Text', 'powerkit-addons-for-elementor' ),
			],
		] );

		$this->add_control( 'close_icon', [
			'label'     => esc_html__( 'Icon', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::ICONS,
			'default'   => [ 'value' => 'fas fa-times', 'library' => 'fa-solid' ],
			'condition' => [ 'close_type' => 'icon' ],
		] );

		$this->add_control( 'close_image', [
			'label'     => esc_html__( 'Image', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::MEDIA,
			'condition' => [ 'close_type' => 'image' ],
		] );

		$this->add_control( 'close_text', [
			'label'     => esc_html__( 'Text', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::TEXT,
			'default'   => esc_html__( 'Close', 'powerkit-addons-for-elementor' ),
			'condition' => [ 'close_type' => 'text' ],
		] );

		$this->add_control( 'close_position', [
			'label'   => esc_html__( 'Position', 'powerkit-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'default' => 'inside-top-right',
			'options' => [
				'inside-top-right'  => esc_html__( 'Inside Top Right', 'powerkit-addons-for-elementor' ),
				'inside-top-left'   => esc_html__( 'Inside Top Left', 'powerkit-addons-for-elementor' ),
				'outside-top-right' => esc_html__( 'Outside Top Right', 'powerkit-addons-for-elementor' ),
				'outside-top-left'  => esc_html__( 'Outside Top Left', 'powerkit-addons-for-elementor' ),
			],
		] );

		$this->add_control( 'close_on_esc', [
			'label'        => esc_html__( 'Close on ESC Key', 'powerkit-addons-for-elementor' ),
			'type'         => Controls_Manager::SWITCHER,
			'return_value' => 'yes',
			'default'      => 'yes',
		] );

		$this->add_control( 'close_on_overlay', [
			'label'        => esc_html__( 'Close on Overlay Click', 'powerkit-addons-for-elementor' ),
			'type'         => Controls_Manager::SWITCHER,
			'return_value' => 'yes',
			'default'      => 'yes',
		] );

		$this->end_controls_section();

		// ── DISPLAY SETTINGS ──────────────────────────────────────────────────
		$this->start_controls_section( 'section_display', [
			'label' => esc_html__( 'Display Settings', 'powerkit-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_CONTENT,
		] );

		$this->add_control( 'trigger_type', [
			'label'   => esc_html__( 'Trigger', 'powerkit-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'default' => 'button',
			'options' => [
				'button'      => esc_html__( 'Button', 'powerkit-addons-for-elementor' ),
				'text'        => esc_html__( 'Text Link', 'powerkit-addons-for-elementor' ),
				'icon'        => esc_html__( 'Icon', 'powerkit-addons-for-elementor' ),
				'image'       => esc_html__( 'Image', 'powerkit-addons-for-elementor' ),
				'on_load'     => esc_html__( 'On Page Load', 'powerkit-addons-for-elementor' ),
				'exit_intent' => esc_html__( 'Exit Intent', 'powerkit-addons-for-elementor' ),
				'after_time'  => esc_html__( 'After Few Seconds', 'powerkit-addons-for-elementor' ),
			],
		] );

		$this->add_control( 'trigger_text', [
			'label'     => esc_html__( 'Button / Text', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::TEXT,
			'default'   => esc_html__( 'Open Popup', 'powerkit-addons-for-elementor' ),
			'condition' => [ 'trigger_type' => [ 'button', 'text' ] ],
		] );

		$this->add_control( 'trigger_icon', [
			'label'     => esc_html__( 'Icon', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::ICONS,
			'default'   => [ 'value' => 'fas fa-bell', 'library' => 'fa-solid' ],
			'condition' => [ 'trigger_type' => 'icon' ],
		] );

		$this->add_control( 'trigger_image', [
			'label'     => esc_html__( 'Image', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::MEDIA,
			'default'   => [ 'url' => Utils::get_placeholder_image_src() ],
			'condition' => [ 'trigger_type' => 'image' ],
		] );

		$this->add_control( 'trigger_delay', [
			'label'     => esc_html__( 'Delay (seconds)', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::NUMBER,
			'default'   => 3,
			'min'       => 0,
			'condition' => [ 'trigger_type' => [ 'on_load', 'after_time' ] ],
		] );

		$this->add_control( 'enable_cookies', [
			'label'        => esc_html__( 'Enable Cookies', 'powerkit-addons-for-elementor' ),
			'type'         => Controls_Manager::SWITCHER,
			'return_value' => 'yes',
			'default'      => 'no',
			'description'  => esc_html__( 'Once closed, do not show again for X days.', 'powerkit-addons-for-elementor' ),
			'condition'    => [ 'trigger_type' => [ 'on_load', 'after_time', 'exit_intent' ] ],
		] );

		$this->add_control( 'cookie_days', [
			'label'     => esc_html__( 'Cookie Duration (days)', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::NUMBER,
			'default'   => 1,
			'min'       => 1,
			'condition' => [ 'trigger_type' => [ 'on_load', 'after_time', 'exit_intent' ], 'enable_cookies' => 'yes' ],
		] );

		$this->end_controls_section();

		// ── STYLE: Box ────────────────────────────────────────────────────────
		$this->start_controls_section( 'section_style_box', [
			'label' => esc_html__( 'Box', 'powerkit-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );

		$this->add_group_control( Group_Control_Background::get_type(), [
			'name'     => 'modal_bg',
			'selector' => '{{WRAPPER}} .pkae-mp__modal',
		] );

		$this->add_group_control( Group_Control_Border::get_type(), [
			'name'     => 'modal_border',
			'selector' => '{{WRAPPER}} .pkae-mp__modal',
		] );

		$this->add_responsive_control( 'modal_border_radius', [
			'label'      => esc_html__( 'Border Radius', 'powerkit-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%' ],
			'default'    => [ 'top' => '12', 'right' => '12', 'bottom' => '12', 'left' => '12', 'unit' => 'px' ],
			'selectors'  => [ '{{WRAPPER}} .pkae-mp__modal' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
		] );

		$this->add_group_control( Group_Control_Box_Shadow::get_type(), [
			'name'     => 'modal_shadow',
			'selector' => '{{WRAPPER}} .pkae-mp__modal',
		] );

		$this->end_controls_section();

		// ── STYLE: Overlay ────────────────────────────────────────────────────
		$this->start_controls_section( 'section_style_overlay', [
			'label' => esc_html__( 'Overlay', 'powerkit-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );

		$this->add_control( 'overlay_color', [
			'label'   => esc_html__( 'Overlay Color', 'powerkit-addons-for-elementor' ),
			'type'    => Controls_Manager::COLOR,
			'default' => 'rgba(0,0,0,0.7)',
		] );

		$this->add_control( 'overlay_blur', [
			'label'     => esc_html__( 'Backdrop Blur (px)', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::SLIDER,
			'range'     => [ 'px' => [ 'min' => 0, 'max' => 20 ] ],
			'default'   => [ 'size' => 0 ],
		] );

		$this->end_controls_section();

		// ── STYLE: Title ──────────────────────────────────────────────────────
		$this->start_controls_section( 'section_style_title', [
			'label'     => esc_html__( 'Title', 'powerkit-addons-for-elementor' ),
			'tab'       => Controls_Manager::TAB_STYLE,
			'condition' => [ 'show_title' => 'yes' ],
		] );

		$this->add_control( 'title_color', [
			'label'     => esc_html__( 'Color', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'selectors' => [ '{{WRAPPER}} .pkae-mp__title' => 'color: {{VALUE}};' ],
		] );

		$this->add_group_control( Group_Control_Typography::get_type(), [
			'name'     => 'title_typo',
			'selector' => '{{WRAPPER}} .pkae-mp__title',
		] );

		$this->add_group_control( Group_Control_Background::get_type(), [
			'name'     => 'title_bg',
			'selector' => '{{WRAPPER}} .pkae-mp__header',
		] );

		$this->add_responsive_control( 'title_padding', [
			'label'      => esc_html__( 'Header Padding', 'powerkit-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', 'em' ],
			'default'    => [ 'top' => '20', 'right' => '30', 'bottom' => '20', 'left' => '30', 'unit' => 'px' ],
			'selectors'  => [ '{{WRAPPER}} .pkae-mp__header' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
		] );

		$this->end_controls_section();

		// ── STYLE: Close Button ───────────────────────────────────────────────
		$this->start_controls_section( 'section_style_close', [
			'label' => esc_html__( 'Close Button', 'powerkit-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );

		$this->add_responsive_control( 'close_size', [
			'label'      => esc_html__( 'Size', 'powerkit-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px' ],
			'range'      => [ 'px' => [ 'min' => 10, 'max' => 80 ] ],
			'default'    => [ 'size' => 45 ],
		] );

		$this->add_responsive_control( 'close_icon_size', [
			'label'     => esc_html__( 'Icon Size', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::SLIDER,
			'range'     => [ 'px' => [ 'min' => 8, 'max' => 50 ] ],
			'default'   => [ 'size' => 28 ],
		] );

		$this->add_control( 'close_position_h', [
			'label'   => esc_html__( 'Horizontal Position', 'powerkit-addons-for-elementor' ),
			'type'    => Controls_Manager::CHOOSE,
			'options' => [
				'left'  => [ 'title' => 'Left',  'icon' => 'eicon-h-align-left' ],
				'right' => [ 'title' => 'Right', 'icon' => 'eicon-h-align-right' ],
			],
			'default' => 'right',
			'toggle'  => false,
			'separator' => 'before',
		] );

		$this->add_responsive_control( 'close_offset_h', [
			'label'      => esc_html__( 'Horizontal Offset', 'powerkit-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'rem' ],
			'range'      => [ 'px' => [ 'min' => -100, 'max' => 1000 ], '%' => [ 'min' => -100, 'max' => 100 ], 'rem' => [ 'min' => -10, 'max' => 1000 ] ],
			'default'    => [ 'size' => -30, 'unit' => 'px' ],
		] );

		$this->add_control( 'close_position_v', [
			'label'   => esc_html__( 'Vertical Position', 'powerkit-addons-for-elementor' ),
			'type'    => Controls_Manager::CHOOSE,
			'options' => [
				'top'    => [ 'title' => 'Top',    'icon' => 'eicon-v-align-top' ],
				'bottom' => [ 'title' => 'Bottom', 'icon' => 'eicon-v-align-bottom' ],
			],
			'default' => 'top',
			'toggle'  => false,
		] );

		$this->add_responsive_control( 'close_offset_v', [
			'label'      => esc_html__( 'Vertical Offset', 'powerkit-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'rem' ],
			'range'      => [ 'px' => [ 'min' => -100, 'max' => 1000 ], '%' => [ 'min' => -100, 'max' => 100 ], 'rem' => [ 'min' => -10, 'max' => 1000 ] ],
			'default'    => [ 'size' => -30, 'unit' => 'px' ],
		] );

		$this->start_controls_tabs( 'close_tabs' );
		$this->start_controls_tab( 'close_normal', [ 'label' => esc_html__( 'Normal', 'powerkit-addons-for-elementor' ) ] );
		$this->add_control( 'close_color', [
			'label'   => esc_html__( 'Color', 'powerkit-addons-for-elementor' ),
			'type'    => Controls_Manager::COLOR,
			'default' => '#ffffff',
		] );
		$this->add_control( 'close_bg_color', [
			'label'   => esc_html__( 'Background', 'powerkit-addons-for-elementor' ),
			'type'    => Controls_Manager::COLOR,
			'default' => 'rgba(0,0,0,0.3)',
		] );
		$this->end_controls_tab();

		$this->start_controls_tab( 'close_hover', [ 'label' => esc_html__( 'Hover', 'powerkit-addons-for-elementor' ) ] );
		$this->add_control( 'close_color_hover', [
			'label'   => esc_html__( 'Color', 'powerkit-addons-for-elementor' ),
			'type'    => Controls_Manager::COLOR,
			'default' => '#ffffff',
		] );
		$this->add_control( 'close_bg_hover', [
			'label'   => esc_html__( 'Background', 'powerkit-addons-for-elementor' ),
			'type'    => Controls_Manager::COLOR,
			'default' => 'rgba(0,0,0,0.6)',
		] );
		$this->end_controls_tab();
		$this->end_controls_tabs();

		$this->add_responsive_control( 'close_border_radius', [
			'label'      => esc_html__( 'Border Radius', 'powerkit-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%' ],
			'default'    => [ 'top' => '50', 'right' => '50', 'bottom' => '50', 'left' => '50', 'unit' => '%' ],
			'separator'  => 'before',
		] );

		$this->end_controls_section();

		// ── STYLE: Trigger ────────────────────────────────────────────────────
		$this->start_controls_section( 'section_style_trigger', [
			'label'     => esc_html__( 'Trigger Button', 'powerkit-addons-for-elementor' ),
			'tab'       => Controls_Manager::TAB_STYLE,
			'condition' => [ 'trigger_type' => [ 'button', 'text', 'icon', 'image' ] ],
		] );

		$this->add_responsive_control( 'trigger_alignment', [
			'label'     => esc_html__( 'Alignment', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::CHOOSE,
			'options'   => [
				'flex-start' => [ 'title' => 'Left',   'icon' => 'eicon-text-align-left' ],
				'center'     => [ 'title' => 'Center', 'icon' => 'eicon-text-align-center' ],
				'flex-end'   => [ 'title' => 'Right',  'icon' => 'eicon-text-align-right' ],
			],
			'default'   => 'flex-start',
			'selectors' => [ '{{WRAPPER}} .pkae-mp__trigger-wrap' => 'display: flex; justify-content: {{VALUE}};' ],
		] );

		$this->add_responsive_control( 'trigger_img_width', [
			'label'      => esc_html__( 'Image Width', 'powerkit-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'em', 'rem' ],
			'range'      => [ 'px' => [ 'min' => 10, 'max' => 800 ], '%' => [ 'min' => 1, 'max' => 100 ] ],
			'condition'  => [ 'trigger_type' => 'image' ],
			'selectors'  => [ '{{WRAPPER}} .pkae-mp__trigger--img img' => 'width: {{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}};' ],
		] );

		$this->add_responsive_control( 'trigger_img_height', [
			'label'      => esc_html__( 'Image Height', 'powerkit-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', 'em', 'rem' ],
			'range'      => [ 'px' => [ 'min' => 10, 'max' => 800 ] ],
			'condition'  => [ 'trigger_type' => 'image' ],
			'selectors'  => [ '{{WRAPPER}} .pkae-mp__trigger--img img' => 'height: {{SIZE}}{{UNIT}}; object-fit: cover;' ],
		] );

		$this->add_responsive_control( 'trigger_icon_size', [
			'label'      => esc_html__( 'Icon Size', 'powerkit-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', 'em', 'rem' ],
			'range'      => [ 'px' => [ 'min' => 10, 'max' => 100 ] ],
			'default'    => [ 'size' => 30, 'unit' => 'px' ],
			'condition'  => [ 'trigger_type' => 'icon' ],
			'selectors'  => [
				'{{WRAPPER}} .pkae-mp__trigger--icon i'   => 'font-size: {{SIZE}}{{UNIT}};',
				'{{WRAPPER}} .pkae-mp__trigger--icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
			],
		] );

		$this->add_group_control( Group_Control_Typography::get_type(), [
			'name'     => 'trigger_typo',
			'selector' => '{{WRAPPER}} .pkae-mp__trigger',
		] );

		$this->add_responsive_control( 'trigger_padding', [
			'label'      => esc_html__( 'Padding', 'powerkit-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', 'em' ],
			'selectors'  => [ '{{WRAPPER}} .pkae-mp__trigger' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
		] );

		$this->add_responsive_control( 'trigger_border_radius', [
			'label'      => esc_html__( 'Border Radius', 'powerkit-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%' ],
			'selectors'  => [ '{{WRAPPER}} .pkae-mp__trigger' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
		] );

		$this->start_controls_tabs( 'trigger_tabs' );
		$this->start_controls_tab( 'trigger_normal', [ 'label' => esc_html__( 'Normal', 'powerkit-addons-for-elementor' ) ] );
		$this->add_control( 'trigger_color', [
			'label'     => esc_html__( 'Text / Icon Color', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'selectors' => [
				'{{WRAPPER}} .pkae-mp__trigger'           => 'color: {{VALUE}};',
				'{{WRAPPER}} .pkae-mp__trigger--icon i'   => 'color: {{VALUE}};',
				'{{WRAPPER}} .pkae-mp__trigger--icon svg' => 'fill: {{VALUE}};',
			],
		] );
		$this->add_control( 'trigger_bg', [
			'label'     => esc_html__( 'Background', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'selectors' => [ '{{WRAPPER}} .pkae-mp__trigger' => 'background-color: {{VALUE}};' ],
		] );
		$this->add_group_control( Group_Control_Border::get_type(), [
			'name'     => 'trigger_border',
			'selector' => '{{WRAPPER}} .pkae-mp__trigger',
		] );
		$this->end_controls_tab();

		$this->start_controls_tab( 'trigger_hover', [ 'label' => esc_html__( 'Hover', 'powerkit-addons-for-elementor' ) ] );
		$this->add_control( 'trigger_color_hover', [
			'label'     => esc_html__( 'Text / Icon Color', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'selectors' => [
				'{{WRAPPER}} .pkae-mp__trigger:hover'           => 'color: {{VALUE}};',
				'{{WRAPPER}} .pkae-mp__trigger--icon:hover i'   => 'color: {{VALUE}};',
				'{{WRAPPER}} .pkae-mp__trigger--icon:hover svg' => 'fill: {{VALUE}};',
			],
		] );
		$this->add_control( 'trigger_bg_hover', [
			'label'     => esc_html__( 'Background', 'powerkit-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'selectors' => [ '{{WRAPPER}} .pkae-mp__trigger:hover' => 'background-color: {{VALUE}};' ],
		] );
		$this->end_controls_tab();
		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	protected function get_elementor_templates() {
		$templates = [ '' => esc_html__( '— Select —', 'powerkit-addons-for-elementor' ) ];
		if ( class_exists( '\Elementor\Plugin' ) ) {
			$items = \Elementor\Plugin::instance()->templates_manager->get_source( 'local' )->get_items();
			foreach ( $items as $item ) {
				$templates[ $item['template_id'] ] = $item['title'];
			}
		}
		return $templates;
	}

	protected function render() {
		$s              = $this->get_settings_for_display();
		Icons_Manager::enqueue_shim();
		$widget_id      = 'pkae-mp-' . $this->get_id();
		$preview        = isset( $s['preview_modal'] ) && 'yes' === $s['preview_modal'];
		$trigger_type   = ! empty( $s['trigger_type'] ) ? $s['trigger_type'] : 'button';
		$appear_effect  = ! empty( $s['appear_effect'] ) ? $s['appear_effect'] : 'fade';
		$close_pos      = ! empty( $s['close_position'] ) ? $s['close_position'] : 'inside-top-right';
		$close_on_esc   = isset( $s['close_on_esc'] ) && 'yes' === $s['close_on_esc'];
		$close_on_over  = isset( $s['close_on_overlay'] ) && 'yes' === $s['close_on_overlay'];
		$enable_cookies = isset( $s['enable_cookies'] ) && 'yes' === $s['enable_cookies'];
		$cookie_days    = ! empty( $s['cookie_days'] ) ? (int) $s['cookie_days'] : 1;
		$modal_width    = isset( $s['modal_width']['size'] ) ? $s['modal_width']['size'] : 600;
		$modal_width_u  = isset( $s['modal_width']['unit'] ) ? $s['modal_width']['unit'] : 'px';
		$overlay_color  = ! empty( $s['overlay_color'] ) ? $s['overlay_color'] : 'rgba(0,0,0,0.7)';
		$overlay_blur   = isset( $s['overlay_blur']['size'] ) ? (int) $s['overlay_blur']['size'] : 0;
		$content_pad    = isset( $s['content_padding'] ) ? $s['content_padding'] : [];
		$cp_u           = ! empty( $content_pad['unit'] ) ? $content_pad['unit'] : 'px';
		$content_padding_css = ! empty( $content_pad ) ? ( ( $content_pad['top'] ?? 30 ) . $cp_u . ' ' . ( $content_pad['right'] ?? 30 ) . $cp_u . ' ' . ( $content_pad['bottom'] ?? 30 ) . $cp_u . ' ' . ( $content_pad['left'] ?? 30 ) . $cp_u ) : '30px';

		// Close button styles
		$close_size     = isset( $s['close_size']['size'] ) ? (int) $s['close_size']['size'] : 36;
		$close_icon_sz  = isset( $s['close_icon_size']['size'] ) ? (int) $s['close_icon_size']['size'] : 16;
		$close_color    = ! empty( $s['close_color'] ) ? $s['close_color'] : '#ffffff';
		$close_bg       = ! empty( $s['close_bg_color'] ) ? $s['close_bg_color'] : 'rgba(0,0,0,0.3)';
		$close_bg_h     = ! empty( $s['close_bg_hover'] ) ? $s['close_bg_hover'] : 'rgba(0,0,0,0.6)';
		$close_color_h  = ! empty( $s['close_color_hover'] ) ? $s['close_color_hover'] : '#ffffff';
		$cr             = isset( $s['close_border_radius'] ) && is_array( $s['close_border_radius'] ) ? $s['close_border_radius'] : [];
		$cru            = ! empty( $cr['unit'] ) ? $cr['unit'] : '%';
		$close_radius   = ! empty( $cr ) ? ( ( $cr['top'] ?? 50 ) . $cru . ' ' . ( $cr['right'] ?? 50 ) . $cru . ' ' . ( $cr['bottom'] ?? 50 ) . $cru . ' ' . ( $cr['left'] ?? 50 ) . $cru ) : '50%';

		// Close position
		$close_pos_h    = ! empty( $s['close_position_h'] ) ? $s['close_position_h'] : 'right';
		$close_pos_v    = ! empty( $s['close_position_v'] ) ? $s['close_position_v'] : 'top';
		$close_off_h    = ( isset( $s['close_offset_h']['size'] ) ? $s['close_offset_h']['size'] : -30 ) . ( isset( $s['close_offset_h']['unit'] ) ? $s['close_offset_h']['unit'] : 'px' );
		$close_off_v    = ( isset( $s['close_offset_v']['size'] ) ? $s['close_offset_v']['size'] : -30 ) . ( isset( $s['close_offset_v']['unit'] ) ? $s['close_offset_v']['unit'] : 'px' );
		$close_opp_h    = 'right' === $close_pos_h ? 'left' : 'right';
		$close_opp_v    = 'top' === $close_pos_v ? 'bottom' : 'top';

		$config = [
			'id'           => $widget_id,
			'trigger'      => $trigger_type,
			'effect'       => $appear_effect,
			'closeOnEsc'   => $close_on_esc,
			'closeOnOver'  => $close_on_over,
			'cookies'      => $enable_cookies,
			'cookieDays'   => $cookie_days,
			'delay'        => ! empty( $s['trigger_delay'] ) ? (int) $s['trigger_delay'] : 3,
			'preview'      => $preview,
		];
		?>
		<style>
		#<?php echo esc_attr( $widget_id ); ?>-overlay { background: <?php echo esc_attr( $overlay_color ); ?>; <?php echo $overlay_blur > 0 ? 'backdrop-filter: blur(' . esc_attr( $overlay_blur ) . 'px);' : ''; ?> }
		#<?php echo esc_attr( $widget_id ); ?>-modal { width: <?php echo esc_attr( $modal_width . $modal_width_u ); ?>; max-width: 95vw; }
		#<?php echo esc_attr( $widget_id ); ?>-modal .pkae-mp__body { padding: <?php echo esc_attr( $content_padding_css ); ?>; }
		.pkae-mp__close-<?php echo esc_attr( $widget_id ); ?> { width: <?php echo esc_attr( $close_size ); ?>px; height: <?php echo esc_attr( $close_size ); ?>px; font-size: <?php echo esc_attr( $close_icon_sz ); ?>px; color: <?php echo esc_attr( $close_color ); ?>; background: <?php echo esc_attr( $close_bg ); ?>; border-radius: <?php echo esc_attr( $close_radius ); ?>; <?php echo esc_attr( $close_pos_v ); ?>: <?php echo esc_attr( $close_off_v ); ?>; <?php echo esc_attr( $close_pos_h ); ?>: <?php echo esc_attr( $close_off_h ); ?>; <?php echo esc_attr( $close_opp_v ); ?>: auto; <?php echo esc_attr( $close_opp_h ); ?>: auto; }
		.pkae-mp__close-<?php echo esc_attr( $widget_id ); ?>:hover { color: <?php echo esc_attr( $close_color_h ); ?>; background: <?php echo esc_attr( $close_bg_h ); ?>; }
		</style>

		<?php // Trigger ?>
		<?php $auto_triggers = [ 'on_load', 'exit_intent', 'after_time' ]; ?>
		<?php if ( ! in_array( $trigger_type, $auto_triggers, true ) ) : ?>
			<div class="pkae-mp__trigger-wrap">
				<?php if ( 'button' === $trigger_type ) : ?>
					<button class="pkae-mp__trigger pkae-mp__trigger--btn" data-modal="<?php echo esc_attr( $widget_id ); ?>">
						<?php echo esc_html( ! empty( $s['trigger_text'] ) ? $s['trigger_text'] : 'Open Popup' ); ?>
					</button>
				<?php elseif ( 'text' === $trigger_type ) : ?>
					<a class="pkae-mp__trigger pkae-mp__trigger--text" href="#" data-modal="<?php echo esc_attr( $widget_id ); ?>">
						<?php echo esc_html( ! empty( $s['trigger_text'] ) ? $s['trigger_text'] : 'Open Popup' ); ?>
					</a>
				<?php elseif ( 'icon' === $trigger_type && ! empty( $s['trigger_icon']['value'] ) ) : ?>
					<button class="pkae-mp__trigger pkae-mp__trigger--icon" data-modal="<?php echo esc_attr( $widget_id ); ?>">
						<?php Icons_Manager::render_icon( $s['trigger_icon'], [ 'aria-hidden' => 'true' ] ); ?>
					</button>
				<?php elseif ( 'image' === $trigger_type && ! empty( $s['trigger_image']['url'] ) ) : ?>
					<button class="pkae-mp__trigger pkae-mp__trigger--img" data-modal="<?php echo esc_attr( $widget_id ); ?>">
						<?php // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage ?>
						<img src="<?php echo esc_url( $s['trigger_image']['url'] ); ?>" alt="">
					</button>
				<?php endif; ?>
			</div>
		<?php endif; ?>

		<?php // Modal HTML (hidden by default) ?>
		<div id="<?php echo esc_attr( $widget_id ); ?>-overlay" class="pkae-mp__overlay<?php echo $preview ? ' pkae-mp--preview pkae-mp--open' : ''; ?>" aria-hidden="<?php echo $preview ? 'false' : 'true'; ?>" role="dialog" aria-modal="true">
			<div id="<?php echo esc_attr( $widget_id ); ?>-modal" class="pkae-mp__modal pkae-mp__effect-<?php echo esc_attr( $appear_effect ); ?>">

				<?php // Close button ?>
				<button class="pkae-mp__close pkae-mp__close-<?php echo esc_attr( $widget_id ); ?> pkae-mp__close--<?php echo esc_attr( $close_pos ); ?>" data-modal="<?php echo esc_attr( $widget_id ); ?>" aria-label="<?php esc_attr_e( 'Close', 'powerkit-addons-for-elementor' ); ?>">
					<?php if ( 'icon' === $s['close_type'] && ! empty( $s['close_icon']['value'] ) ) :
						Icons_Manager::render_icon( $s['close_icon'], [ 'aria-hidden' => 'true' ] );
					elseif ( 'image' === $s['close_type'] && ! empty( $s['close_image']['url'] ) ) : ?>
						<?php // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage ?>
						<img src="<?php echo esc_url( $s['close_image']['url'] ); ?>" alt="">
					<?php elseif ( 'text' === $s['close_type'] ) : ?>
						<?php echo esc_html( ! empty( $s['close_text'] ) ? $s['close_text'] : 'Close' ); ?>
					<?php endif; ?>
				</button>

				<?php // Header ?>
				<?php if ( isset( $s['show_title'] ) && 'yes' === $s['show_title'] && ! empty( $s['modal_title'] ) ) : ?>
					<div class="pkae-mp__header">
						<h4 class="pkae-mp__title"><?php echo esc_html( $s['modal_title'] ); ?></h4>
					</div>
				<?php endif; ?>

				<?php // Body ?>
				<div class="pkae-mp__body">
					<?php $this->render_modal_content( $s ); ?>
				</div>

			</div>
		</div>

		<script>
		(function(){
			window.pkaeModalQueue = window.pkaeModalQueue || [];
			window.pkaeModalQueue.push(<?php echo wp_json_encode( $config ); ?>);
		})();
		</script>
		<?php
	}

	protected function render_modal_content( $s ) {
		$type = ! empty( $s['content_type'] ) ? $s['content_type'] : 'content';

		switch ( $type ) {
			case 'content':
				echo wp_kses_post( ! empty( $s['content_text'] ) ? $s['content_text'] : '' );
				break;

			case 'photo':
				if ( ! empty( $s['content_photo']['url'] ) ) {
					// phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage
					echo '<img src="' . esc_url( $s['content_photo']['url'] ) . '" alt="" style="width:100%;height:auto;display:block;">';
				}
				break;

			case 'youtube':
				if ( ! empty( $s['youtube_url'] ) ) {
					preg_match( '/(?:v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $s['youtube_url'], $m );
					$vid = $m[1] ?? '';
					if ( $vid ) {
						$src = 'https://www.youtube.com/embed/' . esc_attr( $vid ) . '?rel=0';
						echo '<div class="pkae-mp__video-wrap"><iframe class="pkae-mp__video-iframe" src="" data-src="' . esc_attr( $src ) . '" frameborder="0" allowfullscreen></iframe></div>';
					}
				}
				break;

			case 'vimeo':
				if ( ! empty( $s['vimeo_url'] ) ) {
					preg_match( '/vimeo\.com\/(\d+)/', $s['vimeo_url'], $m );
					$vid = $m[1] ?? '';
					if ( $vid ) {
						$src = 'https://player.vimeo.com/video/' . esc_attr( $vid );
						echo '<div class="pkae-mp__video-wrap"><iframe class="pkae-mp__video-iframe" src="" data-src="' . esc_attr( $src ) . '" frameborder="0" allowfullscreen></iframe></div>';
					}
				}
				break;

			case 'video':
				if ( ! empty( $s['video_embed'] ) ) {
					echo '<div class="pkae-mp__video-wrap">' . wp_kses_post( $s['video_embed'] ) . '</div>';
				}
				break;

			case 'template':
				$tid = ! empty( $s['content_template'] ) ? (int) $s['content_template'] : 0;
				if ( $tid ) {
					echo \Elementor\Plugin::instance()->frontend->get_builder_content_for_display( $tid, true ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
				}
				break;

			case 'iframe':
				if ( ! empty( $s['iframe_url'] ) ) {
					$h = isset( $s['iframe_height']['size'] ) ? (int) $s['iframe_height']['size'] : 400;
					echo '<iframe src="' . esc_url( $s['iframe_url'] ) . '" width="100%" height="' . esc_attr( $h ) . '" frameborder="0"></iframe>';
				}
				break;
		}
	}
}
