<?php
if (!defined('ABSPATH')) exit; // Exit if accessed directly
$instant_popup_builder_active_license = get_option('subscription_license_active');
$instant_popup_builder_ipd_active_plugin = get_option('instant_popup_subscription_activated');
if($instant_popup_builder_active_license != 'yes' || $instant_popup_builder_ipd_active_plugin == 'no'){
$instant_popup_builder_page_url = esc_url(menu_page_url('instant-popup-builder', false));

// Simplified template selection - only key templates
$instant_popup_builder_subscription_templates = [
    'basic' => [
        'title' => 'Basic Newsletter',
        'description' => 'Simple email subscription form with minimal design'
    ],

    'simple_subscribe' => [
        'title' => 'Simple Subscribe',
        'description' => 'Clean white card with centered layout and blue subscribe button'
    ],

    'christmas' => [
        'title' => 'Christmas Special',
        'description' => 'Festive holiday-themed popup with Christmas decorations'
    ],
    'black_friday' => [
        'title' => 'Black Friday Discount',
        'description' => 'Promotional popup with discount offer and urgency'
    ],
    'glassmorphism' => [
        'title' => 'Glassmorphism',
        'description' => 'Frosted-glass card with subtle blur effects and modern design'
    ],
    'dark' => [
        'title' => 'Dark Mode Elegant',
        'description' => 'Sleek and stylish dark theme for modern brands'
    ],
    'exit_intent' => [
        'title' => 'Exit Intent Special',
        'description' => 'Blue gradient popup with email icon - perfect for exit intent'
    ],
    'newsletter_horizontal' => [
        'title' => 'Newsletter Horizontal',
        'description' => 'Clean horizontal newsletter subscription form perfect for exit intent'
    ],
    'bottom' => [
        'title' => 'Floating Bottom',
        'description' => 'Slides in from bottom like a mobile app notification'
    ]
    // 'blank' => [
    //     'title' => 'Blank Template',
    //     'description' => 'Start from scratch and create your own custom design'
    // ]
];
?>

<div class="ipb_wrapper template_selection_wrapper">
    <div class="subscription_templates_grid">
        <?php foreach ($instant_popup_builder_subscription_templates as $instant_popup_builder_template_key => $instant_popup_builder_template): ?>
            <div class="template_card <?php echo $instant_popup_builder_template_key === 'blank' ? 'blank_template' : ''; ?>" data-template="<?php echo esc_attr($instant_popup_builder_template_key); ?>">
                <div class="template_preview">
                    <?php if ($instant_popup_builder_template_key === 'blank'): ?>
                        <div class="blank_icon">
                            <i class="fa fa-plus-circle"></i>
                        </div>
                        <div class="template_overlay">
                            <button class="select_btn" data-template="blank">
                                <i class="fa fa-plus"></i> Start Blank
                            </button>
                        </div>
                    <?php else: ?>
                        <div class="template-preview-img template-preview-<?php echo esc_attr($instant_popup_builder_template_key); ?>">
                            <div class="preview-content">
                                <div class="preview-title"><?php echo esc_html($instant_popup_builder_template['title']); ?></div>
                                <div class="preview-form">
                                    <div class="preview-input"></div>
                                    <div class="preview-input"></div>
                                    <div class="preview-button"></div>
                                </div>
                            </div>
                        </div>

                        <div class="template_overlay">
                            <button class="preview_btn" data-template="<?php echo esc_attr($instant_popup_builder_template_key); ?>">
                                <i class="fa fa-eye"></i> Preview
                            </button>
                            <?php if($instant_popup_builder_template_key == 'basic'): ?>
                            <button class="select_btn" data-template="<?php echo esc_attr($instant_popup_builder_template_key); ?>">
                                <i class="fa fa-check"></i> Select
                            </button>
                            <?php else: ?>
                                <a href="https://instantpopupbuilder.com/extensions/subscription-popup/" target="_blank">
                                <button class="select_btn" data-template="<?php echo esc_attr($instant_popup_builder_template_key); ?>">
                                    <i class="fa fa-check"></i> Upgrade
                                </button>
                                </a>
                            <?php endif ?>

                        </div>
                    <?php endif; ?>
                </div>
                <div class="template_info">
                    <h4><?php echo esc_html($instant_popup_builder_template['title']); ?></h4>
                    <p><?php echo esc_html($instant_popup_builder_template['description']); ?></p>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<!-- Template Preview Modal -->
<div id="template_preview_modal" class="modal template_preview_modal" style="display: none;">
    <div class="modal_content">
        <div class="modal_header">
            <h3 id="preview_template_title">Template Preview</h3>
            <span class="close_modal">&times;</span>
        </div>
        <div class="modal_body">
            <div class="preview_container">
                <div id="template_preview_content">
                    <!-- Template preview will be loaded here -->
                </div>
            </div>
        </div>
        <div class="modal_footer">
            <button class="btn btn_secondary close_modal">Close</button>
        </div>
    </div>
</div>

<style>
.template_selection_wrapper {
    max-width: 700px;
    margin: 20px auto;
    padding: 20px;
}

.ipb_new_heading {
    text-align: center;
    margin-bottom: 20px;
}

.ipb_new_heading h3 {
    font-size: 22px;
    color: #333;
    margin-bottom: 8px;
}

.ipb_new_heading p {
    color: #666;
    font-size: 14px;
}

.ipb_template_search {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.ipb_ext_search {
    position: relative;
    max-width: 300px;
    width: 100%;
}

.subscription_templates_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.template_card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #f0f0f0;
}

.template_card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.template_preview {
    position: relative;
    height: 140px;
    overflow: hidden;
}

.template-preview-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.preview-content {
    text-align: center;
    width: 80%;
    transform: scale(0.8);
}

.preview-title {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.preview-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.preview-input {
    width: 100%;
    height: 7px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.1);
}

.preview-button {
    width: 60%;
    height: 10px;
    border-radius: 5px;
    background: #007cba;
    margin-top: 3px;
}

/* Template-specific preview styles */
.template-preview-basic {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.template-preview-basic .preview-input {
    border: 1px solid #dee2e6;
    background: white;
}

.template-preview-simple_subscribe {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

.template-preview-simple_subscribe .preview-title {
    color: #333;
    font-weight: 700;
    margin-bottom: 12px;
}

.template-preview-simple_subscribe .preview-input {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 8px;
}

.template-preview-simple_subscribe .preview-button {
    background: #4285f4;
    border-radius: 4px;
    width: 100%;
}

.template-preview-christmas {
    background: linear-gradient(135deg, #c41e3a 0%, #2e8b57 100%);
    position: relative;
}

.template-preview-christmas::before {
    content: '🎄 ❄️';
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 12px;
}

.template-preview-christmas .preview-title {
    color: white;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.template-preview-christmas .preview-input {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
}

.template-preview-christmas .preview-button {
    background: #c41e3a;
    border-radius: 4px;
}

.template-preview-black_friday {
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
    position: relative;
}

.template-preview-black_friday::before {
    content: '35% OFF';
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ff6b35;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: bold;
}

.template-preview-black_friday .preview-title {
    color: white;
    font-weight: 700;
}

.template-preview-black_friday .preview-input {
    background: #444;
    border: 1px solid #666;
    border-radius: 4px;
}

.template-preview-black_friday .preview-button {
    background: #ff6b35;
    border-radius: 4px;
}

.template-preview-glassmorphism {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

.template-preview-glassmorphism .preview-content {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 20px;
}

.template-preview-glassmorphism .preview-title {
    color: white;
}

.template-preview-glassmorphism .preview-input {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

.template-preview-glassmorphism .preview-button {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
}

.template-preview-background {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect fill="%23667eea" width="100" height="100"/><circle fill="%23764ba2" cx="20" cy="20" r="10"/><circle fill="%23764ba2" cx="80" cy="80" r="15"/></svg>');
    background-size: cover;
}

.template-preview-background .preview-title {
    color: white;
}

.template-preview-background .preview-input {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
}

.template-preview-background .preview-button {
    background: #007cba;
    border-radius: 6px;
}

.template-preview-bottom {
    background: linear-gradient(to bottom, #f8f9fa 60%, #007cba 60%);
}

.template-preview-bottom .preview-content {
    margin-top: 40px;
    background: white;
    border-radius: 16px 16px 0 0;
    padding: 15px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.template-preview-dark {
    background: linear-gradient(135deg, #1f1f1f 0%, #2d2d2d 100%);
}

.template-preview-dark .preview-title {
    color: #ffffff;
}

.template-preview-dark .preview-input {
    background: #3a3a3a;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
}

.template-preview-dark .preview-button {
    background: #6c63ff;
    border-radius: 6px;
}

.template-preview-exit_intent {
    background: linear-gradient(135deg, #4f7df3 0%, #2563eb 100%);
    position: relative;
}

.template-preview-exit_intent::before {
    content: '✦ ✧ ○ +';
    position: absolute;
    top: 10px;
    right: 15px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    letter-spacing: 8px;
}

.template-preview-exit_intent .preview-title {
    color: white;
    font-weight: 700;
}

.template-preview-exit_intent .preview-input {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 8px;
}

.template-preview-exit_intent .preview-button {
    background: #2563eb;
    border-radius: 8px;
    color: white;
}

.template-preview-newsletter_horizontal {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    position: relative;
}

.template-preview-newsletter_horizontal::before {
    content: '📧';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
}

.template-preview-newsletter_horizontal .preview-content {
    margin-top: 20px;
}

.template-preview-newsletter_horizontal .preview-title {
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
}

.template-preview-newsletter_horizontal .preview-form {
    flex-direction: row;
    gap: 6px;
    align-items: center;
}

.template-preview-newsletter_horizontal .preview-input {
    flex: 1;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    height: 8px;
}

.template-preview-newsletter_horizontal .preview-button {
    background: #4285f4;
    border-radius: 6px;
    width: 35%;
    height: 8px;
    margin-top: 0;
}

.template-preview-colorful,
.template-preview-classic,
.template-preview-creative {
    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
}

.template-preview-colorful .preview-title,
.template-preview-classic .preview-title,
.template-preview-creative .preview-title {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.template_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.template_card:hover .template_overlay {
    opacity: 1;
}

.preview_btn, .select_btn {
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.preview_btn {
    background: #fff;
    color: #333;
}

.select_btn {
    background: #007cba;
    color: #fff;
}

.preview_btn:hover {
    background: #f0f0f0;
}

.select_btn:hover {
    background: #005a87;
}

.template_info {
    padding: 15px;
}

.template_info h4 {
    margin: 0 0 6px 0;
    font-size: 16px;
    color: #333;
}

.template_info p {
    margin: 0 0 10px 0;
    color: #666;
    line-height: 1.4;
    font-size: 12px;
}

.blank_template_section {
    border-top: 1px dashed #ddd;
    padding-top: 20px;
    display: flex;
    justify-content: center;
}

.blank_template .template_preview {
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blank_icon {
    font-size: 36px;
    color: #ccc;
}

.blank_template:hover .blank_icon {
    color: #007cba;
}

/* Modal Styles */
.template_preview_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100% !important;
}

.modal_content {
    background: #fff;
    border-radius: 12px;
    max-width: 90%;
    max-height: max-content;
    width: 800px;
    overflow: hidden;
}

.modal_header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close_modal {
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

.close_modal:hover {
    color: #333;
}

.modal_body {
    padding: 20px;
    max-height: 500px;
    overflow-y: auto;
}

.modal_footer {
    padding: 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.btn_secondary {
    background: #f0f0f0;
    color: #333;
}

.btn_primary {
    background: #007cba;
    color: #fff;
}

.btn:hover {
    opacity: 0.9;
}

@media (max-width: 768px) {
    .subscription_templates_grid {
        grid-template-columns: 1fr;
    }

    .template_card {
        max-width: 100%;
    }
}
</style>

<script>
jQuery(document).ready(function($) {
    // Check if we're in a modal context
    var isInModal = $('#subscription-template-modal').length > 0 && $('#subscription-template-modal').is(':visible');
    var container = isInModal ? '#subscription-template-modal' : 'body';

    let selectedTemplate = '';

    // Handle template selection
    $(container).on('click', '.select_btn', function(e) {
        e.preventDefault();
        e.stopPropagation();

        const template = $(this).data('template');
        if(template == 'basic'){
            selectTemplate(template);
        } else {
            window.open('https://instantpopupbuilder.com/extensions/subscription-popup/', '_blank');
        }
        //selectTemplate(template);
    });

    // Handle template preview
    $(container).on('click', '.preview_btn', function(e) {
        e.preventDefault();
        e.stopPropagation();

        const template = $(this).data('template');
        previewTemplate(template);
    });

    // Handle template search
    $(container).on('keyup', '#search_template', function() {
        const searchTerm = $(this).val().toLowerCase();

        $('.template_card').each(function() {
            const title = $(this).find('h4').text().toLowerCase();
            const description = $(this).find('p').text().toLowerCase();

            if (title.includes(searchTerm) || description.includes(searchTerm)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });

    // Modal functionality - only bind if we have the preview modal
    $(container).on('click', '.close_modal', function() {
        $('#template_preview_modal').hide();
    });

    $(container).on('click', '#select_previewed_template', function() {
        if (selectedTemplate) {
            selectTemplate(selectedTemplate);
        }
    });

    // Close preview modal on outside click
    $(document).on('click', '#template_preview_modal', function(e) {
        if (e.target === this) {
            $(this).hide();
        }
    });

    function selectTemplate(template) {
        if (isInModal) {
            // If we're in a modal, trigger the modal's selection handler
            $(container).trigger('template-selected', [template]);
        } else {
            // Original behavior for standalone page
            const url = new URL(window.location.href);
            url.searchParams.set('type', 'subscription');
            url.searchParams.set('template', template);

            window.location.href = url.toString();
        }
    }

    function previewTemplate(template) {
        selectedTemplate = template;

        // Show the modal
        $('#template_preview_modal').show();
        $('#preview_template_title').text('Preview: ' + getTemplateName(template));

        // Load template preview (you can implement AJAX loading here)
        loadTemplatePreview(template);
    }

    function getTemplateName(template) {
        const templateNames = {
            'basic': 'Basic Newsletter',
            'simple_subscribe': 'Simple Subscribe',
            'christmas': 'Christmas Special',
            'black_friday': 'Black Friday Discount',
            'glassmorphism': 'Glassmorphism',
            'dark': 'Dark Mode Elegant',
            'exit_intent': 'Exit Intent Special',
            'bottom': 'Floating Bottom',
            'blank': 'Blank Template'
        };

        return templateNames[template] || 'Unknown Template';
    }

    function loadTemplatePreview(template) {
        // Generate actual template preview content
        let previewContent = '';

        switch(template) {
            case 'basic':
                previewContent = `
                    <div style="background: #ffffff; border-radius: 8px; padding: 30px; max-width: 400px; margin: 0 auto; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);">
                        <h2 style="color: #333333; font-size: 24px; text-align: center; margin-bottom: 10px;">Subscribe to Our Newsletter</h2>
                        <p style="color: #666666; font-size: 14px; text-align: center; margin-bottom: 25px;">Get the latest updates and news delivered to your inbox.</p>
                        <div style="margin-bottom: 20px;">
                            <label style="color: #333333; font-weight: 500; margin-bottom: 5px; display: block;">Full Name</label>
                            <input type="text" placeholder="Enter your full name" style="width: 100%; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 5px; font-size: 14px; box-sizing: border-box;">
                        </div>
                        <div style="margin-bottom: 20px;">
                            <label style="color: #333333; font-weight: 500; margin-bottom: 5px; display: block;">Email Address</label>
                            <input type="email" placeholder="Enter your email address" style="width: 100%; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 5px; font-size: 14px; box-sizing: border-box;">
                        </div>
                        <div style="margin-bottom: 20px; display: flex; align-items: flex-start; gap: 10px;">
                            <input type="checkbox" style="margin-top: 3px;">
                            <label style="font-size: 12px; color: #666666; line-height: 1.4;">I agree to the Privacy Policy and Terms of Service</label>
                        </div>
                        <button style="width: 100%; background: #007cba; color: white; border: none; padding: 15px; border-radius: 5px; font-size: 16px; font-weight: 600; cursor: pointer;">Subscribe Now</button>
                    </div>
                `;
                break;



            case 'simple_subscribe':
                previewContent = `
                    <div style="background: #ffffff; border-radius: 8px; padding: 30px; max-width: 350px; margin: 0 auto; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-align: center;">
                        <h2 style="color: #333333; font-size: 22px; font-weight: 600; margin-bottom: 12px;">Subscribe</h2>
                        <p style="color: #666666; font-size: 14px; margin-bottom: 25px; line-height: 1.5;">We'll keep you up to date about our articles and insights news</p>
                        <div style="margin-bottom: 20px;">
                            <input type="email" placeholder="Enter your email address" style="width: 100%; padding: 12px 16px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 14px; background: #f8f9fa; box-sizing: border-box;">
                        </div>
                        <button style="width: 100%; background: #4285f4; color: white; border: none; padding: 12px 20px; border-radius: 4px; font-size: 15px; font-weight: 600; cursor: pointer;">Subscribe</button>
                    </div>
                `;
                break;



            case 'christmas':
                previewContent = `
                    <div style="background: linear-gradient(135deg, #c41e3a 0%, #2e8b57 100%); border-radius: 12px; padding: 35px 30px; max-width: 400px; margin: 0 auto; color: white; text-align: center; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden;">
                        <div style="position: absolute; top: 10px; right: 15px; font-size: 20px;">🎄</div>
                        <div style="position: absolute; top: 15px; left: 15px; font-size: 16px;">❄️</div>
                        <div style="position: absolute; bottom: 15px; right: 20px; font-size: 16px;">🎁</div>
                        <div style="position: relative; z-index: 2;">
                            <h2 style="font-size: 28px; font-weight: 700; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">
                                <span style="color: #c41e3a; background: white; padding: 2px 8px; border-radius: 4px; margin-right: 8px;">MERRY</span>
                                <span style="color: white;">Christmas</span>
                            </h2>
                            <p style="font-size: 14px; line-height: 1.6; margin-bottom: 25px; opacity: 0.95;">Get exclusive holiday offers and festive updates delivered to your inbox!</p>
                            <div style="margin-bottom: 18px;">
                                <input type="text" placeholder="Your Name" style="width: 100%; padding: 12px 16px; border: none; border-radius: 4px; background: rgba(255, 255, 255, 0.9); font-size: 14px; color: #333; box-sizing: border-box;">
                            </div>
                            <div style="margin-bottom: 20px;">
                                <input type="email" placeholder="Your Email" style="width: 100%; padding: 12px 16px; border: none; border-radius: 4px; background: rgba(255, 255, 255, 0.9); font-size: 14px; color: #333; box-sizing: border-box;">
                            </div>
                            <button style="width: 100%; background: #c41e3a; color: white; border: none; padding: 14px 20px; border-radius: 4px; font-size: 15px; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 1px;">🎄 Subscribe for Holiday Deals</button>
                            <div style="margin-top: 15px;">
                                <p style="font-size: 11px; opacity: 0.8; margin: 0;">Limited time offers • Exclusive deals • Holiday specials</p>
                            </div>
                        </div>
                    </div>
                `;
                break;

            case 'black_friday':
                previewContent = `
                    <div style="background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%); border-radius: 8px; padding: 35px 30px; max-width: 400px; margin: 0 auto; color: white; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); position: relative; border: 2px solid #ff6b35;">
                        <div style="position: absolute; top: -1px; right: -1px; background: #ff6b35; color: white; padding: 8px 12px; font-size: 12px; font-weight: bold; border-radius: 0 6px 0 8px;">35% OFF</div>
                        <div style="margin-bottom: 20px;">
                            <h2 style="font-size: 24px; font-weight: 700; margin-bottom: 8px; color: #ff6b35;">BLACK FRIDAY</h2>
                            <h3 style="font-size: 20px; font-weight: 600; margin-bottom: 12px; color: white;">Get 35% Black Friday limited discount</h3>
                            <p style="font-size: 13px; color: #ccc; margin: 0; line-height: 1.4;">Limited time offer! Don't miss out on our biggest sale of the year.</p>
                        </div>
                        <div style="margin-bottom: 18px;">
                            <input type="text" placeholder="Full Name" style="width: 100%; padding: 12px 16px; border: 1px solid #444; border-radius: 4px; background: #333; color: white; font-size: 14px; box-sizing: border-box;">
                        </div>
                        <div style="margin-bottom: 20px;">
                            <input type="email" placeholder="Email Address" style="width: 100%; padding: 12px 16px; border: 1px solid #444; border-radius: 4px; background: #333; color: white; font-size: 14px; box-sizing: border-box;">
                        </div>
                        <button style="width: 100%; background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%); color: white; border: none; padding: 14px 20px; border-radius: 4px; font-size: 15px; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);">Claim My 35% Discount</button>
                        <div style="margin-top: 15px;">
                            <p style="font-size: 11px; color: #999; margin: 0;">⏰ Sale ends soon • Limited quantities • Exclusive access</p>
                        </div>
                    </div>
                `;
                break;

            case 'glassmorphism':
                previewContent = `
                    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px; padding: 40px; max-width: 450px; margin: 0 auto; min-height: 400px; display: flex; align-items: center; justify-content: center;">
                        <div style="background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; padding: 30px; width: 100%; max-width: 350px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);">
                            <div style="text-align: center; margin-bottom: 25px;">
                                <h2 style="color: white; font-size: 24px; font-weight: 600; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);">Be the First to Know</h2>
                                <p style="color: rgba(255, 255, 255, 0.9); font-size: 14px; line-height: 1.5; margin: 0;">Join our exclusive community and get early access to updates.</p>
                            </div>
                            <div style="display: flex; flex-direction: column; gap: 16px;">
                                <input type="text" placeholder="Your Name" style="width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; color: white; font-size: 14px; backdrop-filter: blur(5px); box-sizing: border-box;">
                                <input type="email" placeholder="Email Address" style="width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; color: white; font-size: 14px; backdrop-filter: blur(5px); box-sizing: border-box;">
                                <div style="margin: 8px 0; display: flex; align-items: flex-start; gap: 8px;">
                                    <div style="width: 16px; height: 16px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; margin-top: 2px;"></div>
                                    <span style="color: rgba(255, 255, 255, 0.9); font-size: 12px; line-height: 1.4;">I accept the terms and conditions</span>
                                </div>
                                <button style="width: 100%; background: rgba(108, 99, 255, 0.8); color: white; border: 1px solid rgba(108, 99, 255, 0.5); padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; backdrop-filter: blur(5px); margin-top: 8px;">Notify Me</button>
                            </div>
                        </div>
                    </div>
                `;
                break;

            case 'background':
                previewContent = `
                    <div style="background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><rect fill=\"%23667eea\" width=\"100\" height=\"100\"/><circle fill=\"%23764ba2\" cx=\"20\" cy=\"20\" r=\"10\"/><circle fill=\"%23764ba2\" cx=\"80\" cy=\"80\" r=\"15\"/></svg>'); background-size: cover; border-radius: 12px; padding: 50px 30px; max-width: 500px; margin: 0 auto; min-height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; color: white;">
                        <div style="background: rgba(255, 255, 255, 0.95); border-radius: 16px; padding: 35px 30px; width: 100%; max-width: 400px; color: #333; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);">
                            <h2 style="font-size: 26px; font-weight: 700; margin-bottom: 15px; color: #333;">Join Our Community</h2>
                            <p style="font-size: 14px; color: #666; margin-bottom: 25px; line-height: 1.6;">Inspiration and news. Straight to your inbox.</p>
                            <div style="margin-bottom: 20px;">
                                <input type="email" placeholder="you@example.com" style="width: 100%; padding: 14px 18px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px; color: #333; box-sizing: border-box;">
                            </div>
                            <button style="width: 100%; background: #007cba; color: white; border: none; padding: 14px 20px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer;">Sign Up</button>
                        </div>
                    </div>
                `;
                break;

            case 'bottom':
                previewContent = `
                    <div style="background: #f5f7fa; border-radius: 12px; padding: 20px; max-width: 500px; margin: 0 auto; min-height: 300px; display: flex; align-items: flex-end; justify-content: center;">
                        <div style="width: 100%; max-width: 400px; background: #ffffff; border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); animation: slideUpFromBottom 0.3s ease-out;">
                            <div style="padding: 12px 20px 8px; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #f0f0f0;">
                                <div style="width: 40px; height: 4px; background: #e0e0e0; border-radius: 2px;"></div>
                            </div>
                            <div style="padding: 20px;">
                                <div style="text-align: center; margin-bottom: 15px; color: #007cba;">
                                    <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M3 8L10.89 13.26C11.2187 13.4793 11.6049 13.5963 12 13.5963C12.3951 13.5963 12.7813 13.4793 13.11 13.26L21 8M5 19H19C19.5304 19 20.0391 18.7893 20.4142 18.4142C20.7893 18.0391 21 17.5304 21 17V7C21 6.46957 20.7893 5.96086 20.4142 5.58579C20.0391 5.21071 19.5304 5 19 5H5C4.46957 5 3.96086 5.21071 3.58579 5.58579C3.21071 5.96086 3 6.46957 3 7V17C3 17.5304 3.21071 18.0391 3.58579 18.4142C3.96086 18.7893 4.46957 19 5 19Z"/>
                                    </svg>
                                </div>
                                <div style="text-align: center; margin-bottom: 20px;">
                                    <h3 style="font-size: 18px; font-weight: 600; color: #333; margin: 0 0 8px 0;">Don't miss out!</h3>
                                    <p style="font-size: 14px; color: #666; margin: 0; line-height: 1.4;">Subscribe for updates and exclusive offers</p>
                                </div>
                                <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 12px;">
                                    <input type="email" placeholder="Email" style="flex: 1; padding: 12px 16px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px; background: #fafafa; box-sizing: border-box;">
                                    <button style="padding: 12px 20px; background: #007cba; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;">Subscribe</button>
                                </div>
                                <div style="display: flex; align-items: center; justify-content: center; gap: 8px;">
                                    <div style="width: 16px; height: 16px; background: #fafafa; border: 2px solid #e0e0e0; border-radius: 3px;"></div>
                                    <span style="font-size: 12px; color: #666;">I agree to receive updates</span>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                break;

            case 'dark':
                previewContent = `
                    <div style="background: #1f1f1f; border-radius: 12px; padding: 35px 30px; max-width: 450px; margin: 0 auto; color: white; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); border: 1px solid #3a3a3a; position: relative; overflow: hidden;">
                        <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 20%, rgba(108, 99, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(108, 99, 255, 0.05) 0%, transparent 50%); pointer-events: none;"></div>
                        <div style="position: relative; z-index: 2;">
                            <div style="text-align: center; margin-bottom: 25px;">
                                <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #6c63ff, #9f93ff); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: white; box-shadow: 0 8px 20px rgba(108, 99, 255, 0.3);">
                                    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M12 2L15.09 8.26L22 9L17 14L18.18 21L12 17.77L5.82 21L7 14L2 9L8.91 8.26L12 2Z"/>
                                    </svg>
                                </div>
                                <h2 style="color: #ffffff; font-size: 24px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.5px;">Subscribe to Our Newsletter</h2>
                                <p style="color: #b8b8b8; font-size: 14px; line-height: 1.6; margin: 0;">Join our exclusive community and stay ahead with the latest updates, insights, and tech trends.</p>
                            </div>
                            <div style="display: flex; flex-direction: column; gap: 20px;">
                                <div>
                                    <label style="color: #e0e0e0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: block;">Full Name</label>
                                    <input type="text" placeholder="Enter your name" style="width: 100%; padding: 14px 16px; background: #3a3a3a; border: 2px solid #4a4a4a; border-radius: 8px; color: #ffffff; font-size: 14px; box-sizing: border-box;">
                                </div>
                                <div>
                                    <label style="color: #e0e0e0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: block;">Email Address</label>
                                    <input type="email" placeholder="Enter your email" style="width: 100%; padding: 14px 16px; background: #3a3a3a; border: 2px solid #4a4a4a; border-radius: 8px; color: #ffffff; font-size: 14px; box-sizing: border-box;">
                                </div>
                                <div style="margin: 8px 0; display: flex; align-items: flex-start; gap: 10px;">
                                    <div style="width: 18px; height: 18px; background: #3a3a3a; border: 2px solid #4a4a4a; border-radius: 4px; margin-top: 2px;"></div>
                                    <span style="color: #b8b8b8; font-size: 12px; line-height: 1.5;">I agree to the Privacy Policy and Terms of Service</span>
                                </div>
                                <button style="width: 100%; background: linear-gradient(135deg, #6c63ff 0%, #9f93ff 100%); color: white; border: none; padding: 16px 24px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; margin-top: 8px;">JOIN</button>
                            </div>
                            <div style="margin-top: 20px; text-align: center;">
                                <p style="color: #888888; font-size: 11px; margin: 0; opacity: 0.8;">We respect your privacy. Unsubscribe at any time.</p>
                            </div>
                        </div>
                    </div>
                `;
                break;

            case 'exit_intent':
                previewContent = `
                    <div style="background: linear-gradient(135deg, #4f7df3 0%, #2563eb 100%); border-radius: 20px; padding: 40px; max-width: 420px; margin: 0 auto; position: relative; overflow: hidden; box-shadow: 0 20px 60px rgba(79, 125, 243, 0.3);">
                        <div style="position: absolute; top: 15px; right: 20px; color: rgba(255, 255, 255, 0.7); font-size: 16px; letter-spacing: 6px; animation: sparkle 3s infinite;">✦ ✧ ○ +</div>
                        <div style="text-align: center; margin-bottom: 30px; color: white;">
                            <div style="margin-bottom: 20px;">
                                <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="color: white;">
                                    <path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <polyline points="22,6 12,13 2,6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                        </div>
                        <div style="background: #ffffff; border-radius: 16px; padding: 30px; text-align: center; position: relative; z-index: 2;">
                            <h2 style="color: #1a1a1a; font-size: 26px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.5px;">Stay with us!</h2>
                            <p style="color: #666666; font-size: 16px; margin-bottom: 25px; line-height: 1.5;">Subscribe to us and get the latest news.</p>
                            <div style="display: flex; flex-direction: column; gap: 15px;">
                                <input type="email" placeholder="Enter your e-mail" style="width: 100%; padding: 16px 20px; border: 2px solid #e8e8e8; border-radius: 12px; font-size: 16px; background: #f8f9fa; box-sizing: border-box;">
                                <button style="width: 100%; background: #2563eb; color: white; border: none; padding: 16px 24px; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer;">Subscribe</button>
                            </div>
                        </div>
                    </div>
                `;
                break;

            case 'newsletter_horizontal':
                previewContent = `
                    <div style="background: #ffffff; border-radius: 12px; padding: 30px; max-width: 500px; margin: 0 auto; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
                        <div style="text-align: center; margin-bottom: 20px;">
                            <div style="margin-bottom: 15px;">
                                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="color: #4285f4;">
                                    <path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <polyline points="22,6 12,13 2,6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <h2 style="color: #333; font-size: 22px; font-weight: 600; margin: 0 0 10px 0; line-height: 1.3;">Subscribe to our newsletter</h2>
                            <p style="color: #666; font-size: 14px; margin: 0 0 25px 0; line-height: 1.5;">Sign up for our newsletter and receive exclusive discounts and promotions.</p>
                        </div>
                        <div style="display: flex; gap: 10px; align-items: center;">
                            <input type="email" placeholder="Your email address" style="flex: 1; padding: 12px 16px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 14px; background: #f8f9fa;">
                            <button style="background: #4285f4; color: white; border: none; padding: 12px 20px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;">Subscribe</button>
                        </div>
                    </div>
                `;
                break;

            case 'colorful':
                previewContent = `
                    <div style="text-align: center; padding: 40px;">
                        <h3>Colorful & Vibrant Template</h3>
                        <p>This template will feature vibrant colors and animated elements.</p>
                        <div style="background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #f9ca24); padding: 20px; border-radius: 15px; margin: 20px 0; color: white; font-weight: bold;">
                            <p>Eye-catching design with vibrant colors</p>
                        </div>
                        <p><em>Full implementation coming soon...</em></p>
                    </div>
                `;
                break;

            case 'classic':
                previewContent = `
                    <div style="text-align: center; padding: 40px;">
                        <h3>Classic Business Template</h3>
                        <p>Professional layout with traditional business styling.</p>
                        <div style="background: #f8f9fa; border: 2px solid #dee2e6; padding: 20px; border-radius: 5px; margin: 20px 0; color: #495057;">
                            <p>Professional • Trustworthy • Corporate</p>
                        </div>
                        <p><em>Full implementation coming soon...</em></p>
                    </div>
                `;
                break;

            case 'creative':
                previewContent = `
                    <div style="text-align: center; padding: 40px;">
                        <h3>Creative Design Template</h3>
                        <p>Unique and artistic layout for creative brands.</p>
                        <div style="background: linear-gradient(135deg, #667eea, #764ba2); padding: 20px; border-radius: 20px; margin: 20px 0; color: white; transform: rotate(-2deg);">
                            <p>Creative • Unique • Artistic</p>
                        </div>
                        <p><em>Full implementation coming soon...</em></p>
                    </div>
                `;
                break;

            case 'blank':
                previewContent = `
                    <div style="text-align: center; padding: 40px; border: 2px dashed #ccc; border-radius: 8px;">
                        <i class="fa fa-plus-circle" style="font-size: 48px; color: #ccc; margin-bottom: 20px;"></i>
                        <h3>Blank Template</h3>
                        <p>Start from scratch and create your own design.</p>
                        <p>Complete creative freedom to build exactly what you need.</p>
                    </div>
                `;
                break;

            default:
                previewContent = `
                    <div style="text-align: center; padding: 40px;">
                        <h3>Preview of ${getTemplateName(template)}</h3>
                        <p>Template preview will be shown here.</p>
                        <div style="background: #f9f9f9; padding: 20px; border-radius: 8px; margin: 20px 0;">
                            <p>This template preview is not yet available.</p>
                        </div>
                    </div>
                `;
        }

        $('#template_preview_content').html(previewContent);
    }
});
</script>
<?php } ?>
