<?php

namespace Unlockafe_addons\Widgets;

use Unlockafe_addons\Traits\Utils;
use Unlockafe_addons\Traits\Widget_helper;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Typography;

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

/**
 * Unlock Popup Anywhere widget
 *
 * @since 1.0.0
 */
class Unlock_Popup_Anywhere extends Widget_Base
{
    use Widget_helper;
    use Utils;

    public function get_name() {
        return 'unlockafe-popup-anywhere';
    }

    public function get_title() {
        return esc_html__('Unlock Popup Anywhere', 'unlock-addons-for-elementor');
    }

    public function get_icon() {
        return 'eicon-cog ulicon';
    }

    public function get_categories() {
        return ['unlockafe-addons'];
    }

    public function get_keywords() {
        return ['popup', 'modal', 'promotion', 'offer', 'counter', 'cta', 'unlockafe'];
    }

    protected function register_controls() {
        // Prebuilt Design
        $this->start_controls_section(
            'section_design',
            [
                'label' => esc_html__('Prebuilt Design', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );
        $this->add_control(
            'design_template',
            [
                'label' => esc_html__('Template', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'default' => 'promotion',
                'options' => [
                    'promotion' => esc_html__('🎉 Promotion', 'unlock-addons-for-elementor'),
                    'offer' => esc_html__('💰 Special Offer', 'unlock-addons-for-elementor'),
                    // 'counter' => esc_html__('⏰ Countdown Timer', 'unlock-addons-for-elementor'),
                    'exit_intent' => esc_html__('🚪 Exit Intent', 'unlock-addons-for-elementor'),
                    'glassmorphism' => esc_html__('💎 Glassmorphism', 'unlock-addons-for-elementor'),
                    'neon_cyber' => esc_html__('🚀 Neon Cyber', 'unlock-addons-for-elementor'),
                    'minimal_zen' => esc_html__('🍃 Minimal Zen', 'unlock-addons-for-elementor'),
                    'gaming' => esc_html__('🎮 Gaming', 'unlock-addons-for-elementor'),
                    'social_media' => esc_html__('📱 Social Media', 'unlock-addons-for-elementor'),
                    // 'black_friday' => esc_html__('🖤 Black Friday', 'unlock-addons-for-elementor'),
                    'crypto' => esc_html__('₿ Crypto/Web3', 'unlock-addons-for-elementor'),
                    'gradient_mesh' => esc_html__('🌈 Gradient Mesh', 'unlock-addons-for-elementor'),
                    'neumorphism' => esc_html__('⚪ Neumorphism', 'unlock-addons-for-elementor'),
                ],
                'description' => esc_html__('Choose a prebuilt template design for your popup', 'unlock-addons-for-elementor'),
            ]
        );
        $this->end_controls_section();

        // Content Customization
        $this->start_controls_section(
            'section_content',
            [
                'label' => esc_html__('Content', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );
        $this->add_control('popup_title', [
            'label' => esc_html__('Title', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::TEXT,
            'default' => esc_html__('Special Offer!', 'unlock-addons-for-elementor'),
        ]);
        $this->add_control('popup_subtitle', [
            'label' => esc_html__('Subtitle', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::TEXT,
            'default' => esc_html__('Don\'t miss out!', 'unlock-addons-for-elementor'),
        ]);
        $this->add_control('popup_description', [
            'label' => esc_html__('Description', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::TEXTAREA,
            'default' => esc_html__('Get 20% off on your first purchase. Limited time only!', 'unlock-addons-for-elementor'),
        ]);
        $this->add_control('popup_image', [
            'label' => esc_html__('Image', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::MEDIA,
            'default' => [ 'url' => '' ],
        ]);
        $this->add_control('cta_text', [
            'label' => esc_html__('CTA Button Text', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::TEXT,
            'default' => esc_html__('Shop Now', 'unlock-addons-for-elementor'),
        ]);
        $this->add_control('cta_link', [
            'label' => esc_html__('CTA Button Link', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::URL,
            'default' => [ 'url' => '#', 'is_external' => true ],
        ]);

        // Theme-specific content controls
        $this->add_control(
            'theme_content_heading',
            [
                'label' => esc_html__('Theme-Specific Content', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        // Promotion Theme Controls
        $this->add_control(
            'promo_badge_text',
            [
                'label' => esc_html__('Offer Badge Text', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('🎉 Special Offer', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'promotion',
                ],
            ]
        );

        $this->add_control(
            'promo_benefit_1',
            [
                'label' => esc_html__('Benefit 1', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Limited Time Only', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'promotion',
                ],
            ]
        );

        $this->add_control(
            'promo_benefit_2',
            [
                'label' => esc_html__('Benefit 2', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Free Shipping', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'promotion',
                ],
            ]
        );

        $this->add_control(
            'promo_benefit_3',
            [
                'label' => esc_html__('Benefit 3', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('30-Day Money Back', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'promotion',
                ],
            ]
        );

        // Offer Theme Controls
        $this->add_control(
            'offer_discount_percentage',
            [
                'label' => esc_html__('Discount Percentage', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('20%', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'offer',
                ],
            ]
        );

        $this->add_control(
            'offer_original_price',
            [
                'label' => esc_html__('Original Price', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('$99.99', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'offer',
                ],
            ]
        );

        $this->add_control(
            'offer_sale_price',
            [
                'label' => esc_html__('Sale Price', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('$79.99', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'offer',
                ],
            ]
        );

        $this->add_control(
            'offer_savings_text',
            [
                'label' => esc_html__('Savings Text', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('You Save $20!', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'offer',
                ],
            ]
        );

        $this->add_control(
            'offer_urgency_text',
            [
                'label' => esc_html__('Urgency Text', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('⏰ Hurry! Offer ends soon', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'offer',
                ],
            ]
        );

        // Counter Theme Controls
        $this->add_control(
            'counter_countdown_title',
            [
                'label' => esc_html__('Countdown Title', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('⏰ Limited Time Offer Ends In:', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'counter',
                ],
            ]
        );

        $this->add_control(
            'counter_stock_text',
            [
                'label' => esc_html__('Stock Warning Text', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('⚠️ Only 5 left in stock!', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'counter',
                ],
            ]
        );

        $this->add_control(
            'counter_viewer_text',
            [
                'label' => esc_html__('Viewer Count Text', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('👥 23 people viewing this offer', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'counter',
                ],
            ]
        );

        $this->add_control(
            'counter_time_type',
            [
                'label' => esc_html__('Countdown Type', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'duration',
                'options' => [
                    'duration' => esc_html__('Duration (Hours/Days)', 'unlock-addons-for-elementor'),
                    'specific' => esc_html__('Specific Date & Time', 'unlock-addons-for-elementor'),
                ],
                'condition' => [
                    'design_template' => 'counter',
                ],
            ]
        );

        $this->add_control(
            'counter_duration_days',
            [
                'label' => esc_html__('Days', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 0,
                'min' => 0,
                'max' => 365,
                'condition' => [
                    'design_template' => 'counter',
                    'counter_time_type' => 'duration',
                ],
            ]
        );

        $this->add_control(
            'counter_duration_hours',
            [
                'label' => esc_html__('Hours', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 2,
                'min' => 0,
                'max' => 23,
                'condition' => [
                    'design_template' => 'counter',
                    'counter_time_type' => 'duration',
                ],
            ]
        );

        $this->add_control(
            'counter_duration_minutes',
            [
                'label' => esc_html__('Minutes', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 0,
                'min' => 0,
                'max' => 59,
                'condition' => [
                    'design_template' => 'counter',
                    'counter_time_type' => 'duration',
                ],
            ]
        );

        $this->add_control(
            'counter_end_date',
            [
                'label' => esc_html__('End Date & Time', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::DATE_TIME,
                'default' => date('Y-m-d H:i', strtotime('+1 week')),
                'condition' => [
                    'design_template' => 'counter',
                    'counter_time_type' => 'specific',
                ],
            ]
        );

        $this->add_control(
            'counter_reset_info',
            [
                'type' => \Elementor\Controls_Manager::RAW_HTML,
                'raw' => '<div style="background: #f0f9ff; padding: 15px; border-radius: 5px; border-left: 4px solid #3b82f6; margin: 10px 0;">
                    <strong>⏰ Global Countdown:</strong><br>
                    This countdown is synchronized for ALL visitors. When you change the time settings, the countdown will automatically restart with your new settings.<br><br>
                    <strong>💡 Tip:</strong> You can also manually reset the countdown using the button below.
                </div>',
                'condition' => [
                    'design_template' => 'counter',
                ],
            ]
        );

        $this->add_control(
            'counter_reset_button',
            [
                'type' => \Elementor\Controls_Manager::RAW_HTML,
                'raw' => '<div style="text-align: center; margin: 15px 0;">
                    <button type="button" class="elementor-button elementor-button-default unlockafe-reset-btn" data-template="counter" data-widget-id="' . $this->get_id() . '" style="background: #dc2626; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">
                        🔄 Reset Countdown Timer
                    </button>
                    <div style="font-size: 11px; color: #666; margin-top: 5px;">This will restart the countdown with current settings</div>
                </div>',
                'condition' => [
                    'design_template' => 'counter',
                ],
            ]
        );

        // Gaming Theme Controls
        $this->add_control(
            'gaming_achievement_text',
            [
                'label' => esc_html__('Achievement Text', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Achievement Unlocked!', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'gaming',
                ],
            ]
        );

        $this->add_control(
            'gaming_level_text',
            [
                'label' => esc_html__('Level Bar Text', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('EPIC REWARDS UNLOCKED', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'gaming',
                ],
            ]
        );

        $this->add_control(
            'gaming_stat_1',
            [
                'label' => esc_html__('Stat 1 Text', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('50M+ Players', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'gaming',
                ],
            ]
        );

        $this->add_control(
            'gaming_stat_2',
            [
                'label' => esc_html__('Stat 2 Text', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('100+ Achievements', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'gaming',
                ],
            ]
        );

        $this->add_control(
            'gaming_stat_3',
            [
                'label' => esc_html__('Stat 3 Text', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Instant Action', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'gaming',
                ],
            ]
        );

        // Social Media Theme Controls
        $this->add_control(
            'social_username',
            [
                'label' => esc_html__('Username', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('@YourBrand', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'social_media',
                ],
            ]
        );

        $this->add_control(
            'social_likes',
            [
                'label' => esc_html__('Likes Count', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('1.2M', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'social_media',
                ],
            ]
        );

        $this->add_control(
            'social_comments',
            [
                'label' => esc_html__('Comments Count', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('8.5K', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'social_media',
                ],
            ]
        );

        $this->add_control(
            'social_shares',
            [
                'label' => esc_html__('Shares Count', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('2.1K', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'social_media',
                ],
            ]
        );

        $this->add_control(
            'social_hashtags',
            [
                'label' => esc_html__('Hashtags', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('#Trending #Viral #MustHave', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'social_media',
                ],
            ]
        );
        // Exit Intent Theme Controls
        $this->add_control(
            'exit_stop_icon',
            [
                'label' => esc_html__('Stop Icon', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('✋', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'exit_intent',
                ],
            ]
        );

        $this->add_control(
            'exit_badge_text',
            [
                'label' => esc_html__('Badge Text', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('🔥 LAST CHANCE', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'exit_intent',
                ],
            ]
        );

        $this->add_control(
            'exit_discount_amount',
            [
                'label' => esc_html__('Discount Amount', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('15% OFF', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'exit_intent',
                ],
            ]
        );

        $this->add_control(
            'exit_discount_description',
            [
                'label' => esc_html__('Discount Description', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Your First Order', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'exit_intent',
                ],
            ]
        );

        $this->add_control(
            'exit_code_label',
            [
                'label' => esc_html__('Code Label', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Use Code:', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'exit_intent',
                ],
            ]
        );

        $this->add_control(
            'exit_code_value',
            [
                'label' => esc_html__('Discount Code', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('STAYWITHUS', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'exit_intent',
                ],
            ]
        );

        $this->add_control(
            'exit_secondary_button_text',
            [
                'label' => esc_html__('Secondary Button Text', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('No thanks, I\'ll pay full price', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'exit_intent',
                ],
            ]
        );

        // Minimal Zen Theme Controls
        $this->add_control(
            'zen_icon',
            [
                'label' => esc_html__('Zen Icon', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('🍃', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'minimal_zen',
                ],
            ]
        );

        // Black Friday Theme Controls
        $this->add_control(
            'bf_discount_percentage',
            [
                'label' => esc_html__('Discount Percentage', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('80%', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'black_friday',
                ],
            ]
        );

        $this->add_control(
            'bf_sale_tagline',
            [
                'label' => esc_html__('Sale Tagline', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('BIGGEST SALE OF THE YEAR', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'black_friday',
                ],
            ]
        );

        $this->add_control(
            'bf_countdown_type',
            [
                'label' => esc_html__('Countdown Type', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'duration',
                'options' => [
                    'duration' => esc_html__('Duration (Hours/Days)', 'unlock-addons-for-elementor'),
                    'specific' => esc_html__('Specific Date & Time', 'unlock-addons-for-elementor'),
                ],
                'condition' => [
                    'design_template' => 'black_friday',
                ],
            ]
        );

        $this->add_control(
            'bf_duration_days',
            [
                'label' => esc_html__('Days', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 1,
                'min' => 0,
                'max' => 365,
                'condition' => [
                    'design_template' => 'black_friday',
                    'bf_countdown_type' => 'duration',
                ],
            ]
        );

        $this->add_control(
            'bf_duration_hours',
            [
                'label' => esc_html__('Hours', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 0,
                'min' => 0,
                'max' => 23,
                'condition' => [
                    'design_template' => 'black_friday',
                    'bf_countdown_type' => 'duration',
                ],
            ]
        );

        $this->add_control(
            'bf_duration_minutes',
            [
                'label' => esc_html__('Minutes', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 0,
                'min' => 0,
                'max' => 59,
                'condition' => [
                    'design_template' => 'black_friday',
                    'bf_countdown_type' => 'duration',
                ],
            ]
        );

        $this->add_control(
            'bf_end_date',
            [
                'label' => esc_html__('Sale End Date & Time', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::DATE_TIME,
                'default' => date('Y-m-d H:i', strtotime('+3 days')),
                'condition' => [
                    'design_template' => 'black_friday',
                    'bf_countdown_type' => 'specific',
                ],
            ]
        );

        $this->add_control(
            'bf_reset_info',
            [
                'type' => \Elementor\Controls_Manager::RAW_HTML,
                'raw' => '<div style="background: #fef3c7; padding: 15px; border-radius: 5px; border-left: 4px solid #f59e0b; margin: 10px 0;">
                    <strong>🖤 Global Sale Timer:</strong><br>
                    This countdown is synchronized for ALL visitors. When you change the time settings, the countdown will automatically restart with your new settings.<br><br>
                    <strong>💡 Tip:</strong> Perfect for real sale campaigns! You can also manually reset using the button below.
                </div>',
                'condition' => [
                    'design_template' => 'black_friday',
                ],
            ]
        );

        $this->add_control(
            'bf_reset_button',
            [
                'type' => \Elementor\Controls_Manager::RAW_HTML,
                'raw' => '<div style="text-align: center; margin: 15px 0;">
                    <button type="button" class="elementor-button elementor-button-default unlockafe-reset-btn" data-template="bf" data-widget-id="' . $this->get_id() . '" style="background: #dc2626; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">
                        🔄 Reset Sale Timer
                    </button>
                    <div style="font-size: 11px; color: #666; margin-top: 5px;">This will restart the sale countdown with current settings</div>
                </div>',
                'condition' => [
                    'design_template' => 'black_friday',
                ],
            ]
        );

        // Crypto Theme Controls
        $this->add_control(
            'crypto_btc_price',
            [
                'label' => esc_html__('Bitcoin Price', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('$45,234', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'crypto',
                ],
            ]
        );

        $this->add_control(
            'crypto_eth_price',
            [
                'label' => esc_html__('Ethereum Price', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('$2,845', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'crypto',
                ],
            ]
        );

        $this->add_control(
            'crypto_bonus_amount',
            [
                'label' => esc_html__('Bonus Amount', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('$50 FREE BITCOIN', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'crypto',
                ],
            ]
        );

        // Glassmorphism Theme Controls
        $this->add_control(
            'glass_feature_1',
            [
                'label' => esc_html__('Feature 1', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Premium Quality', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'glassmorphism',
                ],
            ]
        );

        $this->add_control(
            'glass_feature_2',
            [
                'label' => esc_html__('Feature 2', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Modern Design', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'glassmorphism',
                ],
            ]
        );

        $this->add_control(
            'glass_feature_3',
            [
                'label' => esc_html__('Feature 3', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Future Ready', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'glassmorphism',
                ],
            ]
        );

        // Neon Cyber Theme Controls
        $this->add_control(
            'cyber_stat_1_number',
            [
                'label' => esc_html__('Stat 1 Number', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('99.9%', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'neon_cyber',
                ],
            ]
        );

        $this->add_control(
            'cyber_stat_1_label',
            [
                'label' => esc_html__('Stat 1 Label', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('UPTIME', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'neon_cyber',
                ],
            ]
        );

        $this->add_control(
            'cyber_stat_2_number',
            [
                'label' => esc_html__('Stat 2 Number', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('1M+', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'neon_cyber',
                ],
            ]
        );

        $this->add_control(
            'cyber_stat_2_label',
            [
                'label' => esc_html__('Stat 2 Label', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('USERS', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'neon_cyber',
                ],
            ]
        );

        $this->add_control(
            'cyber_stat_3_number',
            [
                'label' => esc_html__('Stat 3 Number', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('24/7', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'neon_cyber',
                ],
            ]
        );

        $this->add_control(
            'cyber_stat_3_label',
            [
                'label' => esc_html__('Stat 3 Label', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('SUPPORT', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'neon_cyber',
                ],
            ]
        );

        // Neumorphism Theme Controls
        $this->add_control(
            'neuro_stat_1_value',
            [
                'label' => esc_html__('Stat 1 Value', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('98%', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'neumorphism',
                ],
            ]
        );

        $this->add_control(
            'neuro_stat_1_label',
            [
                'label' => esc_html__('Stat 1 Label', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Satisfaction', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'neumorphism',
                ],
            ]
        );

        $this->add_control(
            'neuro_stat_2_value',
            [
                'label' => esc_html__('Stat 2 Value', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('2.5M', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'neumorphism',
                ],
            ]
        );

        $this->add_control(
            'neuro_stat_2_label',
            [
                'label' => esc_html__('Stat 2 Label', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Users', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'neumorphism',
                ],
            ]
        );

        $this->add_control(
            'neuro_stat_3_value',
            [
                'label' => esc_html__('Stat 3 Value', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('4.9★', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'neumorphism',
                ],
            ]
        );

        $this->add_control(
            'neuro_stat_3_label',
            [
                'label' => esc_html__('Stat 3 Label', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Rating', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'neumorphism',
                ],
            ]
        );

        // Gradient Mesh Theme Controls
        $this->add_control(
            'mesh_feature_1',
            [
                'label' => esc_html__('Feature 1', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Vibrant Colors', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'gradient_mesh',
                ],
            ]
        );

        $this->add_control(
            'mesh_feature_2',
            [
                'label' => esc_html__('Feature 2', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Fluid Design', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'gradient_mesh',
                ],
            ]
        );

        $this->add_control(
            'mesh_feature_3',
            [
                'label' => esc_html__('Feature 3', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Modern UI', 'unlock-addons-for-elementor'),
                'condition' => [
                    'design_template' => 'gradient_mesh',
                ],
            ]
        );

        $this->end_controls_section();

        // Modal Settings
        $this->start_controls_section(
            'section_modal',
            [
                'label' => esc_html__('Modal Settings', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );
        $this->add_control('show_as_modal', [
            'label' => esc_html__('Show as Modal', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::SWITCHER,
            'label_on' => esc_html__('Yes', 'unlock-addons-for-elementor'),
            'label_off' => esc_html__('No', 'unlock-addons-for-elementor'),
            'return_value' => 'yes',
            'default' => 'yes',
        ]);
        $this->add_control('display_mode', [
            'label' => esc_html__('Display Mode', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::SELECT,
            'default' => 'immediate',
            'options' => [
                'immediate' => esc_html__('Immediate', 'unlock-addons-for-elementor'),
                'delay' => esc_html__('After Delay', 'unlock-addons-for-elementor'),
                'scroll' => esc_html__('After Scroll', 'unlock-addons-for-elementor'),
                'exit_intent' => esc_html__('Exit Intent', 'unlock-addons-for-elementor'),
            ],
            'condition' => [ 'show_as_modal' => 'yes' ],
        ]);
        $this->add_control('display_delay', [
            'label' => esc_html__('Delay (seconds)', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::NUMBER,
            'default' => 5,
            'min' => 1,
            'max' => 60,
            'step' => 1,
            'condition' => [ 'show_as_modal' => 'yes', 'display_mode' => 'delay' ],
        ]);
        $this->add_control('scroll_percentage', [
            'label' => esc_html__('Scroll Percentage', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::SLIDER,
            'default' => [ 'size' => 50 ],
            'range' => [ 'min' => 1, 'max' => 100 ],
            'condition' => [ 'show_as_modal' => 'yes', 'display_mode' => 'scroll' ],
        ]);
        $this->add_control('frequency', [
            'label' => esc_html__('Show Frequency', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::SELECT,
            'default' => 'session',
            'options' => [
                'session' => esc_html__('Once per session', 'unlock-addons-for-elementor'),
                'day' => esc_html__('Once per day', 'unlock-addons-for-elementor'),
                'always' => esc_html__('Always', 'unlock-addons-for-elementor'),
            ],
        ]);
        
        $this->add_control('cookie_expiry', [
            'label' => esc_html__('Cookie Expiry (days)', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::NUMBER,
            'description' => esc_html__('Number of days before showing the popup again to the same visitor. Set to 0 to show every time.', 'unlock-addons-for-elementor'),
            'default' => 7,
            'min' => 0,
            'condition' => [ 'show_as_modal' => 'yes' ],
        ]);
        
        $this->end_controls_section();

        // Animation & Sound
        $this->start_controls_section(
            'section_animation',
            [
                'label' => esc_html__('Animation & Sound', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );
        $this->add_control('animation_type', [
            'label' => esc_html__('Animation Type', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::SELECT,
            'default' => 'fade',
            'options' => [
                'fade' => esc_html__('Fade', 'unlock-addons-for-elementor'),
                'slide' => esc_html__('Slide', 'unlock-addons-for-elementor'),
                'party' => esc_html__('Party (Confetti)', 'unlock-addons-for-elementor'),
            ],
        ]);
        $this->add_control('sound_on', [
            'label' => esc_html__('Play Sound on Open', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::SWITCHER,
            'label_on' => esc_html__('Yes', 'unlock-addons-for-elementor'),
            'label_off' => esc_html__('No', 'unlock-addons-for-elementor'),
            'return_value' => 'yes',
            'default' => 'no',
        ]);
        $this->end_controls_section();

        // Style Controls
        $this->start_controls_section(
            'section_style',
            [
                'label' => esc_html__('Popup Style', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'popup_background',
                'label' => esc_html__('Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-popup-anywhere-container',
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'popup_border',
                'label' => esc_html__('Border', 'unlock-addons-for-elementor'),
                'selector' => '{{WRAPPER}} .unlockafe-popup-anywhere-container',
            ]
        );
        $this->add_control(
            'popup_border_radius',
            [
                'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-popup-anywhere-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'default' => [
                    'top' => '10',
                    'right' => '10',
                    'bottom' => '10',
                    'left' => '10',
                    'unit' => 'px',
                    'isLinked' => true,
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'popup_box_shadow',
                'label' => esc_html__('Box Shadow', 'unlock-addons-for-elementor'),
                'selector' => '{{WRAPPER}} .unlockafe-popup-anywhere-container',
            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'popup_typography',
                'label' => esc_html__('Typography', 'unlock-addons-for-elementor'),
                'selector' => '{{WRAPPER}} .unlockafe-popup-anywhere-content',
            ]
        );
        $this->end_controls_section();
    }

    protected function render() {
        // Enqueue the popup JS directly (only if not already enqueued)
        if (!wp_script_is('unlockafe-popup-anywhere', 'enqueued')) {
            wp_enqueue_script(
                'unlockafe-popup-anywhere',
                UNLOCKAFE_ASSETS . 'front-end/js/popup-anywhere.js',
                ['jquery'],
                UNLOCKAFE_VERSION . '.' . time(),
                true
            );
        }
        $settings = $this->get_settings_for_display();
        $unique_id = 'unlockafe-popup-anywhere-' . uniqid();
        $image_url = isset($settings['popup_image']['url']) ? $settings['popup_image']['url'] : '';
        $cta_link = isset($settings['cta_link']['url']) ? $settings['cta_link']['url'] : '#';
        $cta_target = isset($settings['cta_link']['is_external']) && $settings['cta_link']['is_external'] ? ' target="_blank" rel="noopener"' : '';
        $template = $settings['design_template'];
        
        $data_settings = [
            'showAsModal' => $settings['show_as_modal'],
            'displayMode' => $settings['display_mode'],
            'displayDelay' => isset($settings['display_delay']) ? intval($settings['display_delay']) : 5,
            'scrollPercentage' => isset($settings['scroll_percentage']['size']) ? intval($settings['scroll_percentage']['size']) : 50,
            'frequency' => $settings['frequency'],
            'cookieExpiry' => isset($settings['cookie_expiry']) ? intval($settings['cookie_expiry']) : 7,
            'animationType' => $settings['animation_type'],
            'soundOn' => $settings['sound_on'],
            'template' => $template,
        ];
        ?>
        <div class="unlockafe-popup-anywhere-wrapper" id="<?php echo esc_attr($unique_id); ?>" data-settings='<?php echo json_encode($data_settings); ?>'>
            <!-- Modal Overlay & Container -->
            <div class="unlockafe-popup-anywhere-modal-overlay" style="display:none;">
                <div class="unlockafe-popup-anywhere-modal-container template-<?php echo esc_attr($template); ?>" style="display:none;">
                    <span class="unlockafe-popup-anywhere-modal-close" title="Close">&times;</span>
                    <div class="unlockafe-popup-anywhere-modal-content">
                        <?php $this->render_template_content($settings, $template, $image_url, $cta_link, $cta_target, $unique_id); ?>
                    </div>
                </div>
            </div>
        </div>
        <?php
    }

    /**
     * Calculate countdown end time based on settings (GLOBAL for all visitors)
     */
    private function calculate_countdown_time($settings, $template_prefix) {
        $time_type = $settings[$template_prefix . '_countdown_type'] ?? $settings[$template_prefix . '_time_type'] ?? 'duration';
        
        // Create unique option key for this widget's countdown
        $widget_id = $this->get_id();
        $option_key = 'unlockafe_countdown_' . $widget_id . '_' . $template_prefix;
        
        // Create settings hash to detect changes
        $settings_data = [
            'type' => $time_type,
            'days' => intval($settings[$template_prefix . '_duration_days'] ?? 0),
            'hours' => intval($settings[$template_prefix . '_duration_hours'] ?? 2),
            'minutes' => intval($settings[$template_prefix . '_duration_minutes'] ?? 0),
            'end_date' => $settings[$template_prefix . '_end_date'] ?? date('Y-m-d H:i', strtotime('+2 hours'))
        ];
        $settings_hash = md5(serialize($settings_data));
        $hash_key = $option_key . '_hash';
        $saved_hash = get_option($hash_key);
        
        // Check if settings have changed - if so, reset the countdown
        if ($saved_hash !== $settings_hash) {
            delete_option($option_key);
            update_option($hash_key, $settings_hash);
        }
        
        if ($time_type === 'specific') {
            $end_date = $settings[$template_prefix . '_end_date'] ?? date('Y-m-d H:i', strtotime('+2 hours'));
            // Ensure we have a properly formatted timestamp
            $end_timestamp = strtotime($end_date);
            if ($end_timestamp === false) {
                // Fallback to 2 hours from now
                $end_timestamp = time() + (2 * 60 * 60);
            }
            $end_time = date('Y-m-d H:i:s', $end_timestamp);
            
            // Save the specific end time globally
            update_option($option_key, $end_time);
            return $end_time;
        } else {
            // Duration-based countdown - check if we already have a global end time
            $saved_end_time = get_option($option_key);
            
            // Check if saved time is still valid (not expired)
            if ($saved_end_time && strtotime($saved_end_time) > time()) {
                return $saved_end_time;
            }
            
            // Create new countdown end time
            $days = intval($settings[$template_prefix . '_duration_days'] ?? 0);
            $hours = intval($settings[$template_prefix . '_duration_hours'] ?? 2);
            $minutes = intval($settings[$template_prefix . '_duration_minutes'] ?? 0);
            
            $total_seconds = ($days * 24 * 60 * 60) + ($hours * 60 * 60) + ($minutes * 60);
            $end_time = date('Y-m-d H:i:s', time() + $total_seconds);
            
            // Save globally so all visitors see the same countdown
            update_option($option_key, $end_time);
            return $end_time;
        }
    }

    /**
     * Reset countdown timer (for admin use)
     */
    private function reset_countdown_timer($template_prefix) {
        $widget_id = $this->get_id();
        $option_key = 'unlockafe_countdown_' . $widget_id . '_' . $template_prefix;
        $hash_key = $option_key . '_hash';
        delete_option($option_key);
        delete_option($hash_key);
    }

    /**
     * Render template-specific content
     */
    private function render_template_content($settings, $template, $image_url, $cta_link, $cta_target, $unique_id) {
        switch ($template) {
            case 'promotion':
                $this->render_promotion_template($settings, $image_url, $cta_link, $cta_target, $unique_id);
                break;
            case 'offer':
                $this->render_offer_template($settings, $image_url, $cta_link, $cta_target, $unique_id);
                break;
            case 'counter':
                $this->render_counter_template($settings, $image_url, $cta_link, $cta_target, $unique_id);
                break;
            case 'exit_intent':
                $this->render_exit_intent_template($settings, $image_url, $cta_link, $cta_target, $unique_id);
                break;
            case 'glassmorphism':
                $this->render_glassmorphism_template($settings, $image_url, $cta_link, $cta_target, $unique_id);
                break;
            case 'neon_cyber':
                $this->render_neon_cyber_template($settings, $image_url, $cta_link, $cta_target, $unique_id);
                break;
            case 'minimal_zen':
                $this->render_minimal_zen_template($settings, $image_url, $cta_link, $cta_target, $unique_id);
                break;
            case 'gaming':
                $this->render_gaming_template($settings, $image_url, $cta_link, $cta_target, $unique_id);
                break;
            case 'social_media':
                $this->render_social_media_template($settings, $image_url, $cta_link, $cta_target, $unique_id);
                break;
            case 'black_friday':
                $this->render_black_friday_template($settings, $image_url, $cta_link, $cta_target, $unique_id);
                break;
            case 'crypto':
                $this->render_crypto_template($settings, $image_url, $cta_link, $cta_target, $unique_id);
                break;
            case 'gradient_mesh':
                $this->render_gradient_mesh_template($settings, $image_url, $cta_link, $cta_target, $unique_id);
                break;
            case 'neumorphism':
                $this->render_neumorphism_template($settings, $image_url, $cta_link, $cta_target, $unique_id);
                break;
            default:
                $this->render_promotion_template($settings, $image_url, $cta_link, $cta_target, $unique_id);
        }
    }

    /**
     * Promotion Template - Professional promotional design
     */
    private function render_promotion_template($settings, $image_url, $cta_link, $cta_target, $unique_id) {
        ?>
        <div class="promotion-template">
            <?php if ($image_url): ?>
                <div class="popup-image">
                    <img src="<?php echo esc_url($image_url); ?>" alt="Promotion Image">
                </div>
            <?php endif; ?>
            <div class="popup-text">
                <div class="offer-badge"><?php echo esc_html($settings['promo_badge_text'] ?: '🎉 Special Offer'); ?></div>
                <h2 class="popup-title"><?php echo esc_html($settings['popup_title']); ?></h2>
                <h4 class="popup-subtitle"><?php echo esc_html($settings['popup_subtitle']); ?></h4>
                <div class="popup-description"><?php echo esc_html($settings['popup_description']); ?></div>
                <div class="benefits-list">
                    <div class="benefit-item">✓ <?php echo esc_html($settings['promo_benefit_1'] ?: 'Limited Time Only'); ?></div>
                    <div class="benefit-item">✓ <?php echo esc_html($settings['promo_benefit_2'] ?: 'Free Shipping'); ?></div>
                    <div class="benefit-item">✓ <?php echo esc_html($settings['promo_benefit_3'] ?: '30-Day Money Back'); ?></div>
                </div>
            </div>
            <a href="<?php echo esc_url($cta_link); ?>" class="popup-cta-button promotion-btn" data-popup-id="<?php echo esc_attr($unique_id); ?>"<?php echo $cta_target; ?>>
                <?php echo esc_html($settings['cta_text']); ?>
            </a>
        </div>
        <?php
    }

    /**
     * Offer Template - E-commerce focused design
     */
    private function render_offer_template($settings, $image_url, $cta_link, $cta_target, $unique_id) {
        ?>
        <div class="offer-template">
            <div class="offer-header">
                <div class="discount-circle">
                    <span class="discount-percentage"><?php echo esc_html($settings['offer_discount_percentage'] ?: '20%'); ?></span>
                    <span class="discount-text">OFF</span>
                </div>
                <div class="offer-text">
                    <h2 class="popup-title"><?php echo esc_html($settings['popup_title']); ?></h2>
                    <h4 class="popup-subtitle"><?php echo esc_html($settings['popup_subtitle']); ?></h4>
                </div>
            </div>
            
            <?php if ($image_url): ?>
                <div class="popup-image">
                    <img src="<?php echo esc_url($image_url); ?>" alt="Offer Image">
                </div>
            <?php endif; ?>
            
            <div class="popup-description"><?php echo esc_html($settings['popup_description']); ?></div>
            
            <div class="offer-details">
                <div class="price-section">
                    <span class="original-price"><?php echo esc_html($settings['offer_original_price'] ?: '$99.99'); ?></span>
                    <span class="sale-price"><?php echo esc_html($settings['offer_sale_price'] ?: '$79.99'); ?></span>
                    <span class="savings"><?php echo esc_html($settings['offer_savings_text'] ?: 'You Save $20!'); ?></span>
                </div>
                <div class="urgency-text"><?php echo esc_html($settings['offer_urgency_text'] ?: '⏰ Hurry! Offer ends soon'); ?></div>
            </div>
            
            <a href="<?php echo esc_url($cta_link); ?>" class="popup-cta-button offer-btn" data-popup-id="<?php echo esc_attr($unique_id); ?>"<?php echo $cta_target; ?>>
                🛒 <?php echo esc_html($settings['cta_text']); ?>
            </a>
        </div>
        <?php
    }

    /**
     * Counter Template - Time-sensitive countdown design
     */
    private function render_counter_template($settings, $image_url, $cta_link, $cta_target, $unique_id) {
        ?>
        <div class="counter-template">
            <div class="urgency-header">
                <div class="flash-icon">⚡</div>
                <h2 class="popup-title"><?php echo esc_html($settings['popup_title']); ?></h2>
            </div>
            
            <h4 class="popup-subtitle"><?php echo esc_html($settings['popup_subtitle']); ?></h4>
            
            <div class="countdown-container">
                <div class="countdown-title"><?php echo esc_html($settings['counter_countdown_title'] ?: '⏰ Limited Time Offer Ends In:'); ?></div>
                <div class="countdown-timer" data-countdown="<?php echo $this->calculate_countdown_time($settings, 'counter'); ?>">
                    <div class="time-unit">
                        <span class="time-number" id="hours">02</span>
                        <span class="time-label">Hours</span>
                    </div>
                    <div class="time-separator">:</div>
                    <div class="time-unit">
                        <span class="time-number" id="minutes">00</span>
                        <span class="time-label">Minutes</span>
                    </div>
                    <div class="time-separator">:</div>
                    <div class="time-unit">
                        <span class="time-number" id="seconds">00</span>
                        <span class="time-label">Seconds</span>
                    </div>
                </div>
            </div>
            
            <?php if ($image_url): ?>
                <div class="popup-image">
                    <img src="<?php echo esc_url($image_url); ?>" alt="Counter Image">
                </div>
            <?php endif; ?>
            
            <div class="popup-description"><?php echo esc_html($settings['popup_description']); ?></div>
            
            <div class="scarcity-indicators">
                <div class="stock-indicator">
                    <span class="stock-text"><?php echo esc_html($settings['counter_stock_text'] ?: '⚠️ Only 5 left in stock!'); ?></span>
                </div>
                <div class="viewer-count">
                    <span class="viewers"><?php echo esc_html($settings['counter_viewer_text'] ?: '👥 23 people viewing this offer'); ?></span>
                </div>
            </div>
            
            <a href="<?php echo esc_url($cta_link); ?>" class="popup-cta-button counter-btn pulse-animation" data-popup-id="<?php echo esc_attr($unique_id); ?>"<?php echo $cta_target; ?>>
                🔥 <?php echo esc_html($settings['cta_text']); ?> - Act Fast!
            </a>
        </div>
        <?php
    }
    /**
     * Exit Intent Template - Retention focused design
     */
    private function render_exit_intent_template($settings, $image_url, $cta_link, $cta_target, $unique_id) {
        ?>
        <div class="exit-intent-template">
            <div class="exit-header">
                <div class="stop-icon"><?php echo esc_html($settings['exit_stop_icon'] ?: '✋'); ?></div>
                <h2 class="popup-title"><?php echo esc_html($settings['popup_title'] ?: 'Wait! Don\'t Go Yet!'); ?></h2>
            </div>
            
            <h4 class="popup-subtitle"><?php echo esc_html($settings['popup_subtitle'] ?: 'You\'re about to miss out on something amazing'); ?></h4>
            
            <?php if ($image_url): ?>
                <div class="popup-image">
                    <img src="<?php echo esc_url($image_url); ?>" alt="Exit Intent Image">
                </div>
            <?php endif; ?>
            
            <div class="popup-description"><?php echo esc_html($settings['popup_description'] ?: 'Before you leave, grab this exclusive offer just for you!'); ?></div>
            
            <div class="exit-offer">
                <div class="last-chance-badge"><?php echo esc_html($settings['exit_badge_text'] ?: '🔥 LAST CHANCE'); ?></div>
                <div class="discount-highlight">
                    <span class="discount-amount"><?php echo esc_html($settings['exit_discount_amount'] ?: '15% OFF'); ?></span>
                    <span class="discount-description"><?php echo esc_html($settings['exit_discount_description'] ?: 'Your First Order'); ?></span>
                </div>
                <div class="exit-code">
                    <span class="code-label"><?php echo esc_html($settings['exit_code_label'] ?: 'Use Code:'); ?></span>
                    <span class="code-value"><?php echo esc_html($settings['exit_code_value'] ?: 'STAYWITHUS'); ?></span>
                </div>
            </div>
            
            <div class="exit-buttons">
                <a href="<?php echo esc_url($cta_link); ?>" class="popup-cta-button exit-btn-primary" data-popup-id="<?php echo esc_attr($unique_id); ?>"<?php echo $cta_target; ?>>
                    <?php echo esc_html($settings['cta_text'] ?: 'Claim My Discount'); ?>
                </a>
                <button class="exit-btn-secondary unlockafe-popup-anywhere-modal-close">
                    <?php echo esc_html($settings['exit_secondary_button_text'] ?: 'No thanks, I\'ll pay full price'); ?>
                </button>
            </div>
        </div>
        <?php
    }

    /**
     * Glassmorphism Template - Modern glass effect design
     */
    private function render_glassmorphism_template($settings, $image_url, $cta_link, $cta_target, $unique_id) {
        ?>
        <div class="glassmorphism-template">
            <div class="glass-backdrop"></div>
            <div class="glass-content">
                <div class="glass-header">
                    <div class="crystal-icon">💎</div>
                    <h2 class="popup-title"><?php echo esc_html($settings['popup_title'] ?: 'Premium Experience'); ?></h2>
                </div>
                
                <h4 class="popup-subtitle"><?php echo esc_html($settings['popup_subtitle'] ?: 'Elevate your journey'); ?></h4>
                
                <?php if ($image_url): ?>
                    <div class="popup-image glass-image">
                        <img src="<?php echo esc_url($image_url); ?>" alt="Glass Image">
                    </div>
                <?php endif; ?>
                
                <div class="popup-description"><?php echo esc_html($settings['popup_description'] ?: 'Experience the future of design with our premium glassmorphism interface.'); ?></div>
                
                <div class="glass-features">
                    <div class="feature-item">🌟 <?php echo esc_html($settings['glass_feature_1'] ?: 'Premium Quality'); ?></div>
                    <div class="feature-item">✨ <?php echo esc_html($settings['glass_feature_2'] ?: 'Modern Design'); ?></div>
                    <div class="feature-item">🔮 <?php echo esc_html($settings['glass_feature_3'] ?: 'Future Ready'); ?></div>
                </div>
                
                <a href="<?php echo esc_url($cta_link); ?>" class="popup-cta-button glass-btn" data-popup-id="<?php echo esc_attr($unique_id); ?>"<?php echo $cta_target; ?>>
                    <?php echo esc_html($settings['cta_text'] ?: 'Enter Experience'); ?>
                </a>
            </div>
        </div>
        <?php
    }

    /**
     * Neon Cyber Template - Cyberpunk/futuristic neon design
     */
    private function render_neon_cyber_template($settings, $image_url, $cta_link, $cta_target, $unique_id) {
        ?>
        <div class="neon-cyber-template">
            <div class="cyber-grid"></div>
            <div class="neon-content">
                <div class="cyber-header">
                    <div class="neon-icon">🚀</div>
                    <h2 class="popup-title neon-title"><?php echo esc_html($settings['popup_title'] ?: 'CYBER OFFER'); ?></h2>
                </div>
                
                <h4 class="popup-subtitle neon-subtitle"><?php echo esc_html($settings['popup_subtitle'] ?: 'ENTER THE MATRIX'); ?></h4>
                
                <?php if ($image_url): ?>
                    <div class="popup-image cyber-image">
                        <img src="<?php echo esc_url($image_url); ?>" alt="Cyber Image">
                    </div>
                <?php endif; ?>
                
                <div class="popup-description cyber-description"><?php echo esc_html($settings['popup_description'] ?: 'Join the digital revolution. Upgrade your reality with cutting-edge technology.'); ?></div>
                
                <div class="cyber-stats">
                    <div class="stat-item">
                        <span class="stat-number"><?php echo esc_html($settings['cyber_stat_1_number'] ?: '99.9%'); ?></span>
                        <span class="stat-label"><?php echo esc_html($settings['cyber_stat_1_label'] ?: 'UPTIME'); ?></span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number"><?php echo esc_html($settings['cyber_stat_2_number'] ?: '1M+'); ?></span>
                        <span class="stat-label"><?php echo esc_html($settings['cyber_stat_2_label'] ?: 'USERS'); ?></span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number"><?php echo esc_html($settings['cyber_stat_3_number'] ?: '24/7'); ?></span>
                        <span class="stat-label"><?php echo esc_html($settings['cyber_stat_3_label'] ?: 'SUPPORT'); ?></span>
                    </div>
                </div>
                
                <a href="<?php echo esc_url($cta_link); ?>" class="popup-cta-button cyber-btn" data-popup-id="<?php echo esc_attr($unique_id); ?>"<?php echo $cta_target; ?>>
                    <?php echo esc_html($settings['cta_text'] ?: 'JACK IN NOW'); ?>
                </a>
            </div>
        </div>
        <?php
    }

    /**
     * Minimal Zen Template - Clean, minimalist design
     */
    private function render_minimal_zen_template($settings, $image_url, $cta_link, $cta_target, $unique_id) {
        ?>
        <div class="minimal-zen-template">
            <div class="zen-content">
                <div class="zen-icon"><?php echo esc_html($settings['zen_icon'] ?: '🍃'); ?></div>
                
                <h2 class="popup-title zen-title"><?php echo esc_html($settings['popup_title'] ?: 'Find Your Zen'); ?></h2>
                <h4 class="popup-subtitle zen-subtitle"><?php echo esc_html($settings['popup_subtitle'] ?: 'Simplicity is the ultimate sophistication'); ?></h4>
                
                <?php if ($image_url): ?>
                    <div class="popup-image zen-image">
                        <img src="<?php echo esc_url($image_url); ?>" alt="Zen Image">
                    </div>
                <?php endif; ?>
                
                <div class="popup-description zen-description"><?php echo esc_html($settings['popup_description'] ?: 'Embrace minimalism. Focus on what truly matters.'); ?></div>
                
                <div class="zen-divider"></div>
                
                <a href="<?php echo esc_url($cta_link); ?>" class="popup-cta-button zen-btn" data-popup-id="<?php echo esc_attr($unique_id); ?>"<?php echo $cta_target; ?>>
                    <?php echo esc_html($settings['cta_text'] ?: 'Begin Journey'); ?>
                </a>
            </div>
        </div>
        <?php
    }

    /**
     * Gaming Template - Gaming/esports themed design
     */
    private function render_gaming_template($settings, $image_url, $cta_link, $cta_target, $unique_id) {
        ?>
        <div class="gaming-template">
            <div class="gaming-bg-pattern"></div>
            <div class="gaming-content">
                <div class="gaming-header">
                    <div class="game-icon">🎮</div>
                    <h2 class="popup-title gaming-title"><?php echo esc_html($settings['popup_title'] ?: 'LEVEL UP!'); ?></h2>
                </div>
                
                <div class="level-bar">
                    <div class="level-progress"></div>
                    <span class="level-text"><?php echo esc_html($settings['gaming_level_text'] ?: 'EPIC REWARDS UNLOCKED'); ?></span>
                </div>
                
                <h4 class="popup-subtitle gaming-subtitle"><?php echo esc_html($settings['gaming_achievement_text'] ?: 'Achievement Unlocked!'); ?></h4>
                
                <?php if ($image_url): ?>
                    <div class="popup-image gaming-image">
                        <img src="<?php echo esc_url($image_url); ?>" alt="Gaming Image">
                    </div>
                <?php endif; ?>
                
                <div class="popup-description gaming-description"><?php echo esc_html($settings['popup_description'] ?: 'Join millions of players in the ultimate gaming experience.'); ?></div>
                
                <div class="gaming-stats">
                    <div class="gaming-stat">
                        <span class="stat-icon">👥</span>
                        <span class="stat-text"><?php echo esc_html($settings['gaming_stat_1'] ?: '50M+ Players'); ?></span>
                    </div>
                    <div class="gaming-stat">
                        <span class="stat-icon">🏆</span>
                        <span class="stat-text"><?php echo esc_html($settings['gaming_stat_2'] ?: '100+ Achievements'); ?></span>
                    </div>
                    <div class="gaming-stat">
                        <span class="stat-icon">⚡</span>
                        <span class="stat-text"><?php echo esc_html($settings['gaming_stat_3'] ?: 'Instant Action'); ?></span>
                    </div>
                </div>
                
                <a href="<?php echo esc_url($cta_link); ?>" class="popup-cta-button gaming-btn" data-popup-id="<?php echo esc_attr($unique_id); ?>"<?php echo $cta_target; ?>>
                    🚀 <?php echo esc_html($settings['cta_text'] ?: 'PLAY NOW'); ?>
                </a>
            </div>
        </div>
        <?php
    }

    /**
     * Social Media Template - Instagram/TikTok inspired design
     */
    private function render_social_media_template($settings, $image_url, $cta_link, $cta_target, $unique_id) {
        ?>
        <div class="social-media-template">
            <div class="social-content">
                <div class="social-header">
                    <div class="profile-section">
                        <div class="profile-avatar">📱</div>
                        <div class="profile-info">
                            <h2 class="popup-title social-username"><?php echo esc_html($settings['social_username'] ?: '@YourBrand'); ?></h2>
                            <span class="verified-badge">✓ Verified</span>
                        </div>
                    </div>
                </div>
                
                <?php if ($image_url): ?>
                    <div class="popup-image social-image">
                        <img src="<?php echo esc_url($image_url); ?>" alt="Social Image">
                    </div>
                <?php endif; ?>
                
                <div class="social-engagement">
                    <div class="engagement-stats">
                        <span class="likes">❤️ <?php echo esc_html($settings['social_likes'] ?: '1.2M'); ?></span>
                        <span class="comments">💬 <?php echo esc_html($settings['social_comments'] ?: '8.5K'); ?></span>
                        <span class="shares">🔄 <?php echo esc_html($settings['social_shares'] ?: '2.1K'); ?></span>
                    </div>
                </div>
                
                <h4 class="popup-subtitle social-caption"><?php echo esc_html($settings['popup_subtitle'] ?: 'Going viral! 🔥'); ?></h4>
                <div class="popup-description social-description"><?php echo esc_html($settings['popup_description'] ?: 'Join the trend that everyone is talking about! Don\'t miss out on the latest viral sensation.'); ?></div>
                
                <div class="social-hashtags">
                    <?php 
                    $hashtags = explode(' ', $settings['social_hashtags'] ?: '#Trending #Viral #MustHave');
                    foreach ($hashtags as $hashtag): 
                        if (trim($hashtag)): ?>
                            <span class="hashtag"><?php echo esc_html(trim($hashtag)); ?></span>
                        <?php endif;
                    endforeach; ?>
                </div>
                
                <a href="<?php echo esc_url($cta_link); ?>" class="popup-cta-button social-btn" data-popup-id="<?php echo esc_attr($unique_id); ?>"<?php echo $cta_target; ?>>
                    📲 <?php echo esc_html($settings['cta_text'] ?: 'Follow Now'); ?>
                </a>
            </div>
        </div>
        <?php
    }

    /**
     * Black Friday Template - Sales event themed design
     */
    private function render_black_friday_template($settings, $image_url, $cta_link, $cta_target, $unique_id) {
        ?>
        <div class="black-friday-template">
            <div class="bf-background-effects"></div>
            <div class="bf-content">
                <div class="bf-header">
                    <div class="bf-logo">🖤</div>
                    <h2 class="popup-title bf-title"><?php echo esc_html($settings['popup_title'] ?: 'BLACK FRIDAY'); ?></h2>
                </div>
                
                <div class="bf-mega-discount">
                    <span class="bf-discount-text">UP TO</span>
                    <span class="bf-discount-number"><?php echo esc_html($settings['bf_discount_percentage'] ?: '80%'); ?></span>
                    <span class="bf-discount-off">OFF</span>
                </div>
                
                <h4 class="popup-subtitle bf-subtitle"><?php echo esc_html($settings['bf_sale_tagline'] ?: 'BIGGEST SALE OF THE YEAR'); ?></h4>
                
                <?php if ($image_url): ?>
                    <div class="popup-image bf-image">
                        <img src="<?php echo esc_url($image_url); ?>" alt="Black Friday Image">
                    </div>
                <?php endif; ?>
                
                <div class="popup-description bf-description"><?php echo esc_html($settings['popup_description'] ?: 'Don\'t miss out on our biggest sale of the year! Limited time only.'); ?></div>
                
                <div class="bf-timer">
                    <div class="bf-timer-label">⏰ SALE ENDS IN:</div>
                    <div class="bf-countdown" data-countdown="<?php echo $this->calculate_countdown_time($settings, 'bf'); ?>">
                        <div class="bf-time-unit">
                            <span class="bf-time-number" id="bf-hours">23</span>
                            <span class="bf-time-label">HRS</span>
                        </div>
                        <div class="bf-time-unit">
                            <span class="bf-time-number" id="bf-minutes">59</span>
                            <span class="bf-time-label">MIN</span>
                        </div>
                        <div class="bf-time-unit">
                            <span class="bf-time-number" id="bf-seconds">59</span>
                            <span class="bf-time-label">SEC</span>
                        </div>
                    </div>
                </div>
                
                <a href="<?php echo esc_url($cta_link); ?>" class="popup-cta-button bf-btn" data-popup-id="<?php echo esc_attr($unique_id); ?>"<?php echo $cta_target; ?>>
                    🛍️ <?php echo esc_html($settings['cta_text'] ?: 'SHOP NOW'); ?>
                </a>
            </div>
        </div>
        <?php
    }

    /**
     * Crypto/Web3 Template - Cryptocurrency themed design
     */
    private function render_crypto_template($settings, $image_url, $cta_link, $cta_target, $unique_id) {
        ?>
        <div class="crypto-template">
            <div class="crypto-background"></div>
            <div class="crypto-content">
                <div class="crypto-header">
                    <div class="crypto-icon">₿</div>
                    <h2 class="popup-title crypto-title"><?php echo esc_html($settings['popup_title'] ?: 'CRYPTO REVOLUTION'); ?></h2>
                </div>
                
                <div class="crypto-price-ticker">
                    <div class="price-item">
                        <span class="crypto-symbol">BTC</span>
                        <span class="crypto-price green"><?php echo esc_html($settings['crypto_btc_price'] ?: '$45,234'); ?></span>
                        <span class="crypto-change">+5.2%</span>
                    </div>
                    <div class="price-item">
                        <span class="crypto-symbol">ETH</span>
                        <span class="crypto-price green"><?php echo esc_html($settings['crypto_eth_price'] ?: '$2,845'); ?></span>
                        <span class="crypto-change">+3.8%</span>
                    </div>
                </div>
                
                <h4 class="popup-subtitle crypto-subtitle"><?php echo esc_html($settings['popup_subtitle'] ?: 'Join the Future of Finance'); ?></h4>
                
                <?php if ($image_url): ?>
                    <div class="popup-image crypto-image">
                        <img src="<?php echo esc_url($image_url); ?>" alt="Crypto Image">
                    </div>
                <?php endif; ?>
                
                <div class="popup-description crypto-description"><?php echo esc_html($settings['popup_description'] ?: 'Start your crypto journey today. Trade, invest, and build wealth in the digital economy.'); ?></div>
                
                <div class="crypto-features">
                    <div class="crypto-feature">
                        <span class="feature-icon">🔒</span>
                        <span class="feature-text">Secure Wallet</span>
                    </div>
                    <div class="crypto-feature">
                        <span class="feature-icon">📈</span>
                        <span class="feature-text">Real-time Trading</span>
                    </div>
                    <div class="crypto-feature">
                        <span class="feature-icon">🌐</span>
                        <span class="feature-text">Global Access</span>
                    </div>
                </div>
                
                <div class="crypto-bonus">
                    <div class="bonus-badge">🎁 WELCOME BONUS</div>
                    <div class="bonus-amount"><?php echo esc_html($settings['crypto_bonus_amount'] ?: '$50 FREE BITCOIN'); ?></div>
                </div>
                
                <a href="<?php echo esc_url($cta_link); ?>" class="popup-cta-button crypto-btn" data-popup-id="<?php echo esc_attr($unique_id); ?>"<?php echo $cta_target; ?>>
                    🚀 <?php echo esc_html($settings['cta_text'] ?: 'START TRADING'); ?>
                </a>
            </div>
        </div>
        <?php
    }

    /**
     * Gradient Mesh Template - Modern gradient mesh design
     */
    private function render_gradient_mesh_template($settings, $image_url, $cta_link, $cta_target, $unique_id) {
        ?>
        <div class="gradient-mesh-template">
            <div class="mesh-background"></div>
            <div class="mesh-content">
                <div class="mesh-header">
                    <div class="mesh-icon">🌈</div>
                    <h2 class="popup-title mesh-title"><?php echo esc_html($settings['popup_title'] ?: 'Colorful Future'); ?></h2>
                </div>
                
                <h4 class="popup-subtitle mesh-subtitle"><?php echo esc_html($settings['popup_subtitle'] ?: 'Where creativity meets innovation'); ?></h4>
                
                <?php if ($image_url): ?>
                    <div class="popup-image mesh-image">
                        <img src="<?php echo esc_url($image_url); ?>" alt="Mesh Image">
                    </div>
                <?php endif; ?>
                
                <div class="popup-description mesh-description"><?php echo esc_html($settings['popup_description'] ?: 'Experience the next generation of design with vibrant gradients and fluid animations.'); ?></div>
                
                <div class="mesh-features">
                    <div class="mesh-feature">
                        <div class="feature-gradient feature-1"></div>
                        <span><?php echo esc_html($settings['mesh_feature_1'] ?: 'Vibrant Colors'); ?></span>
                    </div>
                    <div class="mesh-feature">
                        <div class="feature-gradient feature-2"></div>
                        <span><?php echo esc_html($settings['mesh_feature_2'] ?: 'Fluid Design'); ?></span>
                    </div>
                    <div class="mesh-feature">
                        <div class="feature-gradient feature-3"></div>
                        <span><?php echo esc_html($settings['mesh_feature_3'] ?: 'Modern UI'); ?></span>
                    </div>
                </div>
                
                <a href="<?php echo esc_url($cta_link); ?>" class="popup-cta-button mesh-btn" data-popup-id="<?php echo esc_attr($unique_id); ?>"<?php echo $cta_target; ?>>
                    ✨ <?php echo esc_html($settings['cta_text'] ?: 'Explore Colors'); ?>
                </a>
            </div>
        </div>
        <?php
    }

    /**
     * Neumorphism Template - Soft 3D effect design
     */
    private function render_neumorphism_template($settings, $image_url, $cta_link, $cta_target, $unique_id) {
        ?>
        <div class="neumorphism-template">
            <div class="neuro-content">
                <div class="neuro-header">
                    <div class="neuro-icon">⚪</div>
                    <h2 class="popup-title neuro-title"><?php echo esc_html($settings['popup_title'] ?: 'Soft & Clean'); ?></h2>
                </div>
                
                <h4 class="popup-subtitle neuro-subtitle"><?php echo esc_html($settings['popup_subtitle'] ?: 'The future is soft'); ?></h4>
                
                <?php if ($image_url): ?>
                    <div class="popup-image neuro-image">
                        <img src="<?php echo esc_url($image_url); ?>" alt="Neuro Image">
                    </div>
                <?php endif; ?>
                
                <div class="popup-description neuro-description"><?php echo esc_html($settings['popup_description'] ?: 'Discover the beauty of neumorphism with soft shadows and elegant depth.'); ?></div>
                
                <div class="neuro-stats">
                    <div class="neuro-stat">
                        <div class="stat-value"><?php echo esc_html($settings['neuro_stat_1_value'] ?: '98%'); ?></div>
                        <div class="stat-label"><?php echo esc_html($settings['neuro_stat_1_label'] ?: 'Satisfaction'); ?></div>
                    </div>
                    <div class="neuro-stat">
                        <div class="stat-value"><?php echo esc_html($settings['neuro_stat_2_value'] ?: '2.5M'); ?></div>
                        <div class="stat-label"><?php echo esc_html($settings['neuro_stat_2_label'] ?: 'Users'); ?></div>
                    </div>
                    <div class="neuro-stat">
                        <div class="stat-value"><?php echo esc_html($settings['neuro_stat_3_value'] ?: '4.9★'); ?></div>
                        <div class="stat-label"><?php echo esc_html($settings['neuro_stat_3_label'] ?: 'Rating'); ?></div>
                    </div>
                </div>
                
                <a href="<?php echo esc_url($cta_link); ?>" class="popup-cta-button neuro-btn" data-popup-id="<?php echo esc_attr($unique_id); ?>"<?php echo $cta_target; ?>>
                    <?php echo esc_html($settings['cta_text'] ?: 'Experience Softness'); ?>
                </a>
            </div>
        </div>
        <?php
    }

    // Ensure JS is loaded in Elementor editor preview
    public function __construct($data = [], $args = null) {
        parent::__construct($data, $args);
        
        // Only add editor script hook once
        static $editor_script_added = false;
        if (!$editor_script_added) {
            add_action('elementor/editor/after_enqueue_scripts', function() {
                if (!wp_script_is('unlockafe-popup-anywhere-editor', 'enqueued')) {
                    wp_enqueue_script(
                        'unlockafe-popup-anywhere-editor',
                        UNLOCKAFE_ASSETS . 'front-end/js/popup-anywhere.js',
                        ['jquery'],
                        UNLOCKAFE_VERSION . '.' . time(),
                        true
                    );
                }
            });
            $editor_script_added = true;
        }
    }
} 