<html><head><base href="https://example.com/">
<title>WPFactoryHub 1.128d</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Lato:wght@400;700&family=Montserrat:wght@400;700&family=Playfair+Display:wght@400;700&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<style>
.toolbox {
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100vh;
    background: #f8f9fa;
    padding: 20px;
    border-right: 1px solid #dee2e6;
    overflow-y: auto;
    z-index: 1000;
}

.canvas {
    margin-left: 270px;
    padding: 20px;
    min-height: 100vh;
}

.block-option {
    padding: 10px;
    margin: 5px 0;
    background: white;
    border: 1px solid #dee2e6;
    cursor: move;
    border-radius: 4px;
    transition: all 0.3s;
}

.block-option:hover {
    background: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.draggable-block {
    position: relative;
    padding: 20px;
    margin: 10px 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: grab;
    transition: all 0.3s;
    user-select: none;
}

.draggable-block:active {
    cursor: grabbing;
}

.draggable-block.dragging {
    opacity: 0.5;
    border: 2px dashed #0d6efd;
}

.draggable-block.selected {
    border: 2px solid #0d6efd;
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.25);
}

.block-controls {
    position: absolute;
    right: 5px;
    top: 5px;
    display: none;
    background: white;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 100;
}

.font-controls {
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px solid #dee2e6;
}

.text-format-controls {
    display: none;
}

.draggable-block.selected[data-block-type="headline"] .text-format-controls,
.draggable-block.selected[data-block-type="paragraph"] .text-format-controls {
    display: flex;
}

.draggable-block.selected .block-controls {
    display: block;
}

.drop-zone {
    min-height: 50px;
    border: 2px dashed #dee2e6;
    margin: 10px 0;
    padding: 10px;
    background: #f8f9fa;
}

.drop-zone.drag-over {
    background: #e9ecef;
    border-color: #6c757d;
}

.temp-drop-zone {
    min-height: 20px;
    transition: all 0.2s ease;
    background: #e9ecef;
    border: 2px dashed #6c757d;
}

.code-editor {
    width: 100%;
    min-height: 100px;
    font-family: monospace;
    padding: 10px;
    margin-bottom: 10px;
    white-space: pre-wrap;
}

.code-editor-wrapper {
    transition: display 0.3s ease;
}

.block-content {
    width: 100%;
    transition: all 0.3s;
}

.html-preview {
    width: 100%;
    min-height: 50px;
    overflow: auto;
}

.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }

.control-group {
    margin-bottom: 5px;
}

.control-group label {
    font-size: 0.8rem;
    margin-bottom: 2px;
}

.font-preview {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.button-controls {
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px solid #dee2e6;
}

.bullet-icon {
    font-size: 1em; 
    color: inherit; 
}

.bullets-list {
    padding-left: 20px; 
}

.container-fluid { padding: 0; }

.bullet-image-col {
    display: flex;
    justify-content: center; 
    align-items: center; 
}

.bullet-list-col {
    display: flex;
    justify-content: center; 
    align-items: center; 
}

.bullets-list {
    width: 100%;
}

@media (max-width: 767.98px) {
    .w-md-100 {
        width: 100% !important;
    }
}

@media (max-width: 991.98px) {
    .w-lg-100 {
        width: 100% !important;
    }
}
</style>
</head>
<body>

<div class="toolbox">
    

    <center><h5 class="mb-0">WPFactoryHub</h5></center>
    <div class="d-flex justify-content-between align-items-center mb-2">
        

        <h4 class="mb-0">Plugin Settings</h4>
        <a href="#" onclick="togglePluginSettings()" class="text-decoration-none">
            <i class="bi bi-chevron-up" id="pluginSettingsIcon"></i>
        </a>
    </div>
    <div id="pluginSettingsContent">
        <div class="control-group mb-3">
            <label>Plugin Name:</label>
            <input type="text" class="form-control form-control-sm" id="pluginName" value="My Plugin">
        </div>
        <div class="control-group mb-3">
            <label>Menu Title:</label>
            <input type="text" class="form-control form-control-sm" id="pluginMenuTitle" value="My Plugin">
        </div>
        <div class="control-group mb-3">
            <label>Plugin Description:</label>
            <textarea class="form-control form-control-sm" id="pluginDescription" rows="2" placeholder="Description of your plugin...">Enter the plugin description here.</textarea>
        </div>
        <div class="control-group mb-3">
            <label>Plugin Version:</label>
            <input type="text" class="form-control form-control-sm" id="pluginVersion" value="1.0">
        </div>
        <div class="control-group mb-3">
            <label>Plugin Author:</label>
            <input type="text" class="form-control form-control-sm" id="pluginAuthor" value="Your Name">
        </div>
        <hr>
    </div>
    <div class="d-flex justify-content-between align-items-center mb-2">
        <h4 class="mb-0">Page Settings</h4>
        <a href="#" onclick="togglePageSettings()" class="text-decoration-none">
            <i class="bi bi-chevron-up" id="pageSettingsIcon"></i>
        </a>
    </div>
    <div id="pageSettingsContent">
        <div class="control-group mb-3">
            <label>Page Title:</label>
            <input type="text" class="form-control form-control-sm" id="pageTitle" value="My Page">
        </div>
        <div class="control-group mb-3">
            <label>Page Slug:</label>
            <input type="text" class="form-control form-control-sm" id="pageSlug" value="landing-page" placeholder="landing-page">
        </div>
        <div class="control-group mb-3">
            <label>Meta Keywords:</label>
            <input type="text" class="form-control form-control-sm" id="metaKeywords" placeholder="keyword1, keyword2, ...">
        </div>
        <div class="control-group mb-3">
            <label>Meta Description:</label>
            <textarea class="form-control form-control-sm" id="metaDescription" rows="2" placeholder="Page description..."></textarea>
        </div>
        <div class="control-group mb-3">
            <label>Retargeting:</label>
            <textarea class="form-control form-control-sm" id="retargetingCode" rows="3" placeholder="Insert retargeting code here..."></textarea>
        </div>
        <hr>
    </div>
    <h4>Blocks</h4>
    <div class="block-option" draggable="true" data-block-type="headline">
        Headline
    </div>
    <div class="block-option" draggable="true" data-block-type="paragraph">
        Paragraph
    </div>
    <div class="block-option" draggable="true" data-block-type="button">
        Button
    </div>
    <div class="block-option" draggable="true" data-block-type="image">
        Image
    </div>
    <div class="block-option" draggable="true" data-block-type="bullets">
        Bullets
    </div>
    <div class="block-option" draggable="true" data-block-type="code">
        HTML Code
    </div>
    <hr>
    <div class="d-flex justify-content-between align-items-center mb-2">
        <h4 class="mb-0">Thank You Page</h4>
        <a href="#" onclick="toggleThankYouPageSettings()" class="text-decoration-none">
            <i class="bi bi-chevron-up" id="thankYouPageSettingsIcon"></i>
        </a>
    </div>
    <div id="thankYouPageSettingsContent">
        <div class="control-group mb-3">
            <label>Access Key:</label>
            <input type="text" class="form-control form-control-sm" id="thankYouPageAccessKey" value="9242">
        </div>
        <div class="control-group mb-3">
            <label>Page Title:</label>
            <input type="text" class="form-control form-control-sm" id="thankYouPageTitle" value="Thank You">
        </div>
        <div class="control-group mb-3">
            <label>Download Link Title:</label>
            <input type="text" class="form-control form-control-sm" id="downloadLinkTitle" value="Your Download">
        </div>
        <div class="control-group mb-3">
            <label>Download Link Text:</label>
            <input type="text" class="form-control form-control-sm" id="downloadLinkText" value="Click here to download">
        </div>
        <div class="control-group mb-3">
            <label>Download Link Url:</label>
            <input type="text" class="form-control form-control-sm" id="downloadLinkUrl" value="https://" placeholder="https://">
        </div>
        <div class="control-group mb-3">
            <label>Footer Text:</label>
            <textarea class="form-control form-control-sm" id="thankYouFooterText" rows="2" placeholder="Enter footer text..."></textarea>
        </div>
        <input type="hidden" name="thankyou_enabled" value="1">
    </div>
</div>

<div style="margin-left: 270px; padding: 20px 20px 0 20px;" class="d-flex align-items-center">
    <button class="btn btn-primary" onclick="saveAsWordPressPlugin()">
        <i class="bi bi-wordpress"></i> Save as WordPress Plugin
    </button>
</div>

<div class="canvas" id="canvas">
    <div class="drop-zone" data-position="0"></div>
</div>

<div class="modal fade" id="linkDialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Link</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="url" class="form-control" id="linkUrl" placeholder="https://example.com">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="applyLink()">Apply</button>
                <button type="button" class="btn btn-danger" onclick="removeLink()">Remove Link</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="confirmDialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Action</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this block?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" onclick="confirmDelete()">Delete</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
const GOOGLE_FONTS = [
    'Roboto',
    'Open Sans',
    'Lato',
    'Montserrat',
    'Playfair Display',
    'Poppins'
];

const FONT_SIZES = [
    '12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px', '42px', '48px', '56px', '64px', '72px'
];

function saveToLocalStorage() {
    // Save plugin settings
    const pluginSettings = {
        pluginName: document.getElementById('pluginName').value,
        pluginMenuTitle: document.getElementById('pluginMenuTitle').value,
        pluginDescription: document.getElementById('pluginDescription').value,
        pluginVersion: document.getElementById('pluginVersion').value,
        pluginAuthor: document.getElementById('pluginAuthor').value
    };
    localStorage.setItem(getStorageKey('pluginSettings'), JSON.stringify(pluginSettings));

    // Save page settings
    const pageSettings = {
        pageTitle: document.getElementById('pageTitle').value,
        pageSlug: document.getElementById('pageSlug').value,
        metaKeywords: document.getElementById('metaKeywords').value,
        metaDescription: document.getElementById('metaDescription').value,
        retargetingCode: document.getElementById('retargetingCode').value
    };
    localStorage.setItem(getStorageKey('pageSettings'), JSON.stringify(pageSettings));

    // Save thank you page settings
    const thankYouSettings = {
        accessKey: document.getElementById('thankYouPageAccessKey').value,
        title: document.getElementById('thankYouPageTitle').value,
        downloadLinkTitle: document.getElementById('downloadLinkTitle').value,
        downloadLinkText: document.getElementById('downloadLinkText').value,
        downloadLinkUrl: document.getElementById('downloadLinkUrl').value,
        footerText: document.getElementById('thankYouFooterText').value
    };
    localStorage.setItem(getStorageKey('thankYouSettings'), JSON.stringify(thankYouSettings));

    // Save HTML blocks
    const canvas = document.getElementById('canvas');
    const blocks = Array.from(canvas.querySelectorAll('.draggable-block'));
    const htmlBlocks = blocks.reduce((acc, block, index) => {
        if (block.dataset.blockType === 'code') {
            const codeEditor = block.querySelector('.code-editor');
            if (codeEditor) {
                acc[`block_${index}`] = codeEditor.value;
            }
        }
        return acc;
    }, {});
    localStorage.setItem(getStorageKey('htmlBlocks'), JSON.stringify(htmlBlocks));
}

function loadFromLocalStorage() {
    // Load plugin settings
    const pluginSettings = JSON.parse(localStorage.getItem(getStorageKey('pluginSettings')) || '{}');
    if (pluginSettings) {
        document.getElementById('pluginName').value = pluginSettings.pluginName || 'My Landing Page Plugin';
        document.getElementById('pluginMenuTitle').value = pluginSettings.pluginMenuTitle || 'My Landing Page';
        document.getElementById('pluginDescription').value = pluginSettings.pluginDescription || 'Custom landing page created with Landing Page Generator';
        document.getElementById('pluginVersion').value = pluginSettings.pluginVersion || '1.0';
        document.getElementById('pluginAuthor').value = pluginSettings.pluginAuthor || 'Landing Page Generator';
    }

    // Load page settings
    const pageSettings = JSON.parse(localStorage.getItem(getStorageKey('pageSettings')) || '{}');
    if (pageSettings) {
        document.getElementById('pageTitle').value = pageSettings.pageTitle || 'My Page';
        document.getElementById('pageSlug').value = pageSettings.pageSlug || 'landing-page';
        document.getElementById('metaKeywords').value = pageSettings.metaKeywords || '';
        document.getElementById('metaDescription').value = pageSettings.metaDescription || '';
        document.getElementById('retargetingCode').value = pageSettings.retargetingCode || '';
    }

    // Load thank you page settings
    const thankYouSettings = JSON.parse(localStorage.getItem(getStorageKey('thankYouSettings')) || '{}');
    if (thankYouSettings) {
        document.getElementById('thankYouPageAccessKey').value = thankYouSettings.accessKey || '9242';
        document.getElementById('thankYouPageTitle').value = thankYouSettings.title || 'Thank You';
        document.getElementById('downloadLinkTitle').value = thankYouSettings.downloadLinkTitle || 'Your Download';
        document.getElementById('downloadLinkText').value = thankYouSettings.downloadLinkText || 'Click here to download';
        document.getElementById('downloadLinkUrl').value = thankYouSettings.downloadLinkUrl || 'https://';
        document.getElementById('thankYouFooterText').value = thankYouSettings.footerText || '';
    }

    // Load HTML blocks 
    const htmlBlocks = JSON.parse(localStorage.getItem(getStorageKey('htmlBlocks')) || '{}');
    const canvas = document.getElementById('canvas');
    const blocks = Array.from(canvas.querySelectorAll('.draggable-block'));
    blocks.forEach((block, index) => {
        if (block.dataset.blockType === 'code' && htmlBlocks[`block_${index}`]) {
            const codeEditor = block.querySelector('.code-editor');
            if (codeEditor) {
                codeEditor.value = htmlBlocks[`block_${index}`];
                updateHTML(codeEditor);
            }
        }
    });
}

function getStorageKey(key) {
  const pluginName = document.getElementById('pluginName').value;
  const pluginPrefix = pluginName.toLowerCase().replace(/[^a-z0-9]/g, '_');
  return `${pluginPrefix}_${key}`;
}

// Add event listeners to input fields for auto-save
document.addEventListener('DOMContentLoaded', function() {
    loadFromLocalStorage();

    // Add input event listeners to all form fields
    const allInputs = document.querySelectorAll('input, textarea');
    allInputs.forEach(input => {
        input.addEventListener('input', saveToLocalStorage);
    });
});

document.addEventListener('DOMContentLoaded', function() {
    const blockOptions = document.querySelectorAll('.block-option');
    const canvas = document.getElementById('canvas');
    let blockCounter = 0;
    let linkDialog;
    let confirmDialog;
    let deleteBlockId = null;
    let currentSelection = null;

    function clearCanvas() {
        const canvas = document.getElementById('canvas');
        // Clear existing content but maintain drop zone
        canvas.innerHTML = '<div class="drop-zone" data-position="0"></div>';
        blockCounter = 0;

        // Create Hello World button block
        const block = document.createElement('div');
        block.className = 'draggable-block';
        block.id = `block-${blockCounter++}`;
        block.draggable = true;
        block.setAttribute('data-block-type', 'button');

        const controls = createBlockControls(block.id, 'button');
        
        const content = `
            <div class="block-content text-center">
                <a href="#" class="btn btn-primary" target="_self" style="background-color: #000000; border-color: #000000; font-size: 24px; width: 31%;">Hello World</a>
            </div>
        `;

        block.innerHTML = controls + content;
        canvas.insertBefore(block, canvas.querySelector('.drop-zone'));
    }

    blockOptions.forEach(block => {
        block.addEventListener('dragstart', (e) => {
            e.dataTransfer.setData('text/plain', block.dataset.blockType);
        });
    });

    document.addEventListener('dragstart', handleBlockDragStart);
    document.addEventListener('dragend', handleBlockDragEnd);

    function handleBlockDragStart(e) {
        const block = e.target.closest('.draggable-block');
        if (!block) return;

        block.classList.add('dragging');
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/plain', block.id);
    }

    function handleBlockDragEnd(e) {
        const block = e.target.closest('.draggable-block');
        if (!block) return;
        block.classList.remove('dragging');

        document.querySelectorAll('.temp-drop-zone').forEach(zone => zone.remove());
    }

    document.addEventListener('click', (e) => {
        const block = e.target.closest('.draggable-block');
        const controls = e.target.closest('.block-controls');

        if (!block && !controls) {
            document.querySelectorAll('.draggable-block').forEach(b => {
                b.classList.remove('selected');
            });
            return;
        }

        if (block && !controls) {
            document.querySelectorAll('.draggable-block').forEach(b => {
                b.classList.remove('selected');
            });
            block.classList.add('selected');
        }
    });

    document.addEventListener('dragover', (e) => {
        e.preventDefault();
        const draggingBlock = document.querySelector('.dragging');
        const targetBlock = e.target.closest('.draggable-block');
        const dropZone = e.target.closest('.drop-zone');

        document.querySelectorAll('.drop-zone, .temp-drop-zone').forEach(zone => {
            zone.classList.remove('drag-over');
        });

        if (dropZone) {
            dropZone.classList.add('drag-over');
        }

        if (targetBlock && draggingBlock && targetBlock !== draggingBlock) {
            document.querySelectorAll('.temp-drop-zone').forEach(zone => zone.remove());

            const draggingRect = draggingBlock.getBoundingClientRect();
            const targetRect = targetBlock.getBoundingClientRect();
            const mouseY = e.clientY;

            const threshold = targetRect.top + (targetRect.height / 2);

            if (mouseY < threshold) {
                targetBlock.parentNode.insertBefore(draggingBlock, targetBlock);
            } else {
                targetBlock.parentNode.insertBefore(draggingBlock, targetBlock.nextSibling);
            }
        }
    });

    document.addEventListener('drop', (e) => {
        e.preventDefault();
        const dropZone = e.target.closest('.drop-zone') || e.target.closest('.temp-drop-zone');
        if (!dropZone) return;

        dropZone.classList.remove('drag-over');
        const data = e.dataTransfer.getData('text/plain');

        if (data.startsWith('block-')) {
            const block = document.getElementById(data);
            if (block) {
                dropZone.parentNode.insertBefore(block, dropZone);

                document.querySelectorAll('.drop-zone').forEach(zone => zone.remove());

                const blocks = Array.from(document.querySelectorAll('.draggable-block'));
                blocks.forEach(b => {
                    const newDropZone = document.createElement('div');
                    newDropZone.className = 'drop-zone';
                    b.parentNode.insertBefore(newDropZone, b.nextSibling);
                });

                if (blocks.length === 0) {
                    const initialDropZone = document.createElement('div');
                    initialDropZone.className = 'drop-zone';
                    document.getElementById('canvas').appendChild(initialDropZone);
                }
            }
        } else {
            const blockType = data;
            const position = parseInt(dropZone.dataset.position) || 0;
            createBlock(blockType, position);
        }

        if (dropZone.classList.contains('temp-drop-zone')) {
            dropZone.remove();
        }

        document.querySelectorAll('.temp-drop-zone').forEach(zone => zone.remove());
        updateDropZonePositions();
    });

    function createFontControls() {
        const fontOptions = GOOGLE_FONTS.map(font =>
            `<option value="${font}" style="font-family: '${font}'">${font}</option>`
        ).join('');

        const sizeOptions = FONT_SIZES.map(size =>
            `<option value="${size}">${size}</option>`
        ).join('');

        return `
            <div class="font-controls">
                <div class="control-group">
                    <label>Font Family:</label>
                    <select class="form-select form-select-sm" onchange="updateFontFamily(this)">
                        ${fontOptions}
                    </select>
                </div>
                <div class="control-group">
                    <label>Font Size:</label>
                    <select class="form-select form-select-sm" onchange="updateFontSize(this)">
                        ${sizeOptions}
                    </select>
                </div>
                <div class="control-group">
                    <label>Font Color:</label>
                    <input type="color" class="form-control form-control-sm" oninput="updateFontColor(this)" onchange="updateFontColor(this)">
                </div>
            </div>
        `;
    }

    function textFormatControls() {
        return `
            <div class="d-flex gap-1 mb-2 text-format-controls">
                <button class="btn btn-sm btn-outline-secondary" onclick="formatText('bold')">
                    <i class="bi bi-type-bold"></i>
                </button>
                <button class="btn btn-sm btn-outline-secondary" onclick="formatText('italic')">
                    <i class="bi bi-type-italic"></i>
                </button>
                <button class="btn btn-sm btn-outline-secondary" onclick="formatText('underline')">
                    <i class="bi bi-type-underline"></i>
                </button>
                <button class="btn btn-sm btn-outline-secondary" onclick="toggleLinkDialog()">
                    <i class="bi bi-link"></i>
                </button>
            </div>
        `;
    }

    function buttonControls() {
        const fontOptions = GOOGLE_FONTS.map(font =>
            `<option value="${font}" style="font-family: '${font}'">${font}</option>`
        ).join('');

        const sizeOptions = FONT_SIZES.map(size =>
            `<option value="${size}" ${size === '24px' ? 'selected' : ''}>${size}</option>`
        ).join('');

        return `
            <div class="button-controls">
                <div class="control-group">
                    <label>Button Text:</label>
                    <input type="text" class="form-control form-control-sm" value="Click Here to Download" onchange="updateButtonText(this)">
                </div>
                <div class="control-group">
                    <label>URL:</label>
                    <input type="url" class="form-control form-control-sm" placeholder="https://example.com" onchange="updateButtonUrl(this)">
                </div>
                <div class="control-group">
                    <label>Target:</label>
                    <select class="form-select form-select-sm" onchange="updateButtonTarget(this)">
                        <option value="_self">Same Window (_self)</option>
                        <option value="_blank">New Window (_blank)</option>
                    </select>
                </div>
                <div class="control-group">
                    <label>Text Color:</label>
                    <input type="color" class="form-control form-control-sm" value="#ffffff" oninput="updateButtonTextColor(this)" onchange="updateButtonTextColor(this)">
                </div>
                <div class="control-group">
                    <label>Background Color:</label>
                    <input type="color" class="form-control form-control-sm" value="#000000" oninput="updateButtonBgColor(this)" onchange="updateButtonBgColor(this)">
                </div>
                <div class="control-group">
                    <label>Font Family:</label>
                    <select class="form-select form-select-sm" onchange="updateButtonFont(this)">
                        ${fontOptions}
                    </select>
                </div>
                <div class="control-group">
                    <label>Font Size:</label>
                    <select class="form-select form-select-sm" onchange="updateButtonFontSize(this)">
                        ${sizeOptions}
                    </select>
                </div>
                <div class="control-group">
                    <label>Font Weight:</label>
                    <select class="form-select form-select-sm" onchange="updateButtonFontWeight(this)">
                        <option value="normal">Normal</option>
                        <option value="bold">Bold</option>
                    </select>
                </div>
                <div class="control-group">
                    <label>Button Width:</label>
                    <div class="d-flex align-items-center gap-2">
                        <input type="range" class="form-range" 
                               min="10" max="100" value="31" 
                               oninput="updateButtonWidth(this)"
                               onchange="updateButtonWidth(this)">
                        <span class="width-value">31%</span>
                    </div>
                </div>
                <div class="control-group">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" onchange="updateButtonResponsive(this)" id="buttonResponsive">
                        <label class="form-check-label">100% width on lg and smaller</label>
                    </div>
                </div>
            </div>
        `;
    }

    function imageControls() {
        return `
            <div class="control-group">
                <input type="file" class="form-control" accept="image/*" onchange="handleImageUpload(this)">
                <div class="control-group mt-2">
                    <label>Image Width:</label>
                    <div class="d-flex align-items-center gap-2">
                        <input type="range" class="form-range" 
                               min="10" max="100" value="100" 
                               oninput="updateImageWidth(this)"
                               onchange="updateImageWidth(this)">
                        <span class="width-value">100%</span>
                    </div>
                </div>
            </div>
        `;
    }

    function bulletControls() {
        const fontOptions = GOOGLE_FONTS.map(font =>
            `<option value="${font}" style="font-family: '${font}'">${font}</option>`
        ).join('');

        const sizeOptions = FONT_SIZES.map(size =>
            `<option value="${size}">${size}</option>`
        ).join('');

        const bulletIcons = [
            'circle-fill', 'square-fill', 'diamond-fill', 'star-fill', 
            'check-circle-fill', 'check-square-fill', 'arrow-right-circle-fill',
            'caret-right-fill', 'chevron-right'
        ];

        const iconOptions = bulletIcons.map(icon =>
            `<option value="bi-${icon}"><i class="bi bi-${icon}"></i> ${icon}</option>`
        ).join('');

        return `
            <div class="bullet-controls">
                <div class="control-group mb-3">
                    <label>Side Image:</label>
                    <input type="file" class="form-control form-control-sm" accept="image/*" onchange="handleBulletImageUpload(this)">
                    <button class="btn btn-sm btn-outline-danger mt-2" onclick="removeBulletImage(this)">
                        Remove Image
                    </button>
                </div>
                <div class="control-group">
                    <label>Font Family:</label>
                    <select class="form-select form-select-sm" onchange="updateBulletFont(this)">
                        ${fontOptions}
                    </select>
                </div>
                <div class="control-group">
                    <label>Font Size:</label>
                    <select class="form-select form-select-sm" onchange="updateBulletTextSize(this)">
                        ${sizeOptions}
                    </select>
                </div>
                <div class="control-group">
                    <label>Font Color:</label>
                    <input type="color" class="form-control form-control-sm" oninput="updateBulletColor(this)" onchange="updateBulletColor(this)">
                </div>
                <div class="control-group">
                    <label>Bullet Icon:</label>
                    <select class="form-select form-select-sm" onchange="updateBulletIcon(this)">
                        ${iconOptions}
                    </select>
                </div>
                <div class="control-group">
                    <label>Bullet Size:</label>
                    <select class="form-select form-select-sm" onchange="updateBulletIconSize(this)">
                        ${sizeOptions}
                    </select>
                </div>
                <div class="control-group">
                    <label>Bullet Color:</label>
                    <input type="color" class="form-control form-control-sm" oninput="updateBulletIconColor(this)" onchange="updateBulletIconColor(this)">
                </div>
                <div class="mt-2 d-flex gap-2">
                    <button class="btn btn-sm btn-outline-primary w-50" onclick="addBulletPoint(this)">
                        Add Bullet Point
                    </button>
                    <button class="btn btn-sm btn-outline-danger w-50" onclick="removeBulletPoint(this)">
                        Remove Bullet Point
                    </button>
                </div>
            </div>
        `;
    }

    function codeControls() {
        return '';
    }

    function generateTypeSpecificControls(blockType) {
        switch(blockType) {
            case 'headline':
            case 'paragraph':
                return textFormatControls() + createFontControls();
            case 'button':
                return buttonControls();
            case 'image':
                return imageControls();
            case 'bullets':
                return bulletControls();
            case 'code':
                return codeControls();
            default:
                return '';
        }
    }

    function createBlockControls(blockId, blockType) {
        const showAlignmentButtons = !['code', 'bullets'].includes(blockType);

        return `
            <div class="block-controls">
                <div class="d-flex gap-1 mb-2">
                    <button class="btn btn-sm btn-outline-success" onclick="cloneBlock('${blockId}')">
                        <i class="bi bi-files"></i>
                    </button>
                    ${showAlignmentButtons ? `
                        <button class="btn btn-sm btn-outline-primary" onclick="alignBlock('${blockId}', 'left')">
                            <i class="bi bi-text-left"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-primary" onclick="alignBlock('${blockId}', 'center')">
                            <i class="bi bi-text-center"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-primary" onclick="alignBlock('${blockId}', 'right')">
                            <i class="bi bi-text-right"></i>
                        </button>
                    ` : ''}
                    <button class="btn btn-sm btn-outline-danger ms-auto" onclick="deleteBlock('${blockId}')">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
                ${generateTypeSpecificControls(blockType)}
            </div>
        `;
    }

    function createBlock(type, position) {
        const block = document.createElement('div');
        block.className = 'draggable-block';
        block.id = `block-${blockCounter++}`;
        block.draggable = true;
        block.setAttribute('data-block-type', type);

        const controls = createBlockControls(block.id, type);
        let content = '';
        
        switch(type) {
            case 'headline':
                content = `
                    <div class="block-content">
                        <h2 contenteditable="true">Edit this headline</h2>
                    </div>
                `;
                break;
            case 'paragraph':
                content = `
                    <div class="block-content">
                        <p contenteditable="true">Edit this paragraph text. Click to start typing...</p>
                    </div>
                `;
                break;
            case 'button':
                content = `
                    <div class="block-content text-center">
                        <a href="#" class="btn btn-primary" target="_self" style="background-color: #000000; border-color: #000000; font-size: 24px; width: 31%;">Click Here to Download</a>
                    </div>
                `;
                break;
            case 'image':
                content = `
                    <div class="block-content">
                        <div class="mb-3">
                            <img class="mt-2" src="https://via.placeholder.com/300x200" 
                                 alt="Upload an image" style="max-width: 100%;">
                        </div>
                    </div>
                `;
                break;
            case 'bullets':
                content = `
                    <div class="block-content">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-12 bullet-list-col">
                                    <ul class="list-unstyled bullets-list">
                                        <li class="d-flex align-items-center gap-2 mb-2">
                                            <i class="bi bi-circle-fill bullet-icon"></i>
                                            <span contenteditable="true">First bullet point</span>
                                        </li>
                                        <li class="d-flex align-items-center gap-2 mb-2">
                                            <i class="bi bi-circle-fill bullet-icon"></i>
                                            <span contenteditable="true">Second bullet point</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                break;
            case 'code':
                content = `
                    <div class="block-content">
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="form-label mb-0">HTML Code Editor</label>
                                <div class="d-flex align-items-center gap-2">
                                    
                                    
                                    <button class="btn btn-sm btn-outline-secondary ms-2" onclick="toggleCodeEditor(this)">
                                        <i class="bi bi-chevron-up"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="code-editor-wrapper">
                                <textarea class="code-editor form-control" onchange="updateHTML(this)" oninput="updateHTML(this)">&lt;div class="custom-html"&gt;Edit your HTML here&lt;/div&gt;</textarea>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Preview</label>
                            <div class="html-preview p-3 border rounded bg-light"></div>
                        </div>
                    </div>
                `;
                break;
        }

        block.innerHTML = controls + content;

        const dropZone = document.querySelector(`[data-position="${position}"]`);
        dropZone.parentNode.insertBefore(block, dropZone);

        updateDropZonePositions();
    }

    window.toggleCodeEditor = function(button) {
        const wrapper = button.closest('.block-content').querySelector('.code-editor-wrapper');
        const icon = button.querySelector('i');
        
        if (wrapper.style.display === 'none') {
            wrapper.style.display = 'block';
            icon.classList.remove('bi-chevron-down');
            icon.classList.add('bi-chevron-up');
        } else {
            wrapper.style.display = 'none';
            icon.classList.remove('bi-chevron-up');
            icon.classList.add('bi-chevron-down');
        }
    };

    window.toggleCodeCenter = function(checkbox) {
        const block = checkbox.closest('.draggable-block');
        const preview = block.querySelector('.html-preview');
        const textarea = block.querySelector('.code-editor');
        const currentHTML = textarea.value;
        
        updateHTML(textarea);
    };

    window.updateHTML = function(textarea) {
        const block = textarea.closest('.draggable-block');
        const preview = block.querySelector('.html-preview');
        const centerCheckbox = block.querySelector('.form-check-input');
        
        let html = textarea.value;
        
        // Strip PHP tags for preview
        html = html.replace(/<\?php[\s\S]*?\?>/g, '');
        
        if (centerCheckbox && centerCheckbox.checked) {
            preview.innerHTML = `<center>${html}</center>`;
        } else {
            preview.innerHTML = html;
        }
    };

    window.deleteBlock = function(blockId) {
        if (!confirmDialog) {
            confirmDialog = new bootstrap.Modal(document.getElementById('confirmDialog'));
        }
        deleteBlockId = blockId;
        confirmDialog.show();
    };

    window.confirmDelete = function() {
        const block = document.getElementById(deleteBlockId);
        if (block) {
            const nextDropZone = block.nextElementSibling;
            if (nextDropZone && nextDropZone.classList.contains('drop-zone')) {
                nextDropZone.remove();
            }
            block.remove();
            
            document.querySelectorAll('.drop-zone').forEach(zone => zone.remove());
            
            const blocks = Array.from(document.querySelectorAll('.draggable-block'));
            blocks.forEach(b => {
                const newDropZone = document.createElement('div');
                newDropZone.className = 'drop-zone';
                b.parentNode.insertBefore(newDropZone, b.nextSibling);
            });
            
            if (blocks.length === 0) {
                const initialDropZone = document.createElement('div');
                initialDropZone.className = 'drop-zone';
                document.getElementById('canvas').appendChild(initialDropZone);
            }
            
            updateDropZonePositions();
        }
        confirmDialog.hide();
        deleteBlockId = null;
    };

    window.cloneBlock = function(blockId) {
        const originalBlock = document.getElementById(blockId);
        if (originalBlock) {
            const clone = originalBlock.cloneNode(true);
            clone.id = `block-${blockCounter++}`; 
            
            clone.querySelectorAll('[onclick]').forEach(el => {
                el.setAttribute('onclick', el.getAttribute('onclick').replace(blockId, clone.id));
            });
            
            originalBlock.parentNode.insertBefore(clone, originalBlock.nextSibling);
            
            if (!clone.nextElementSibling?.classList.contains('drop-zone')) {
                const newDropZone = document.createElement('div');
                newDropZone.className = 'drop-zone';
                clone.parentNode.insertBefore(newDropZone, clone.nextSibling);
            }
            
            updateDropZonePositions();
        }
    };

    window.alignBlock = function(blockId, alignment) {
        const block = document.getElementById(blockId);
        if (block) {
            const content = block.querySelector('.block-content');
            content.classList.remove('text-start', 'text-center', 'text-end');
            switch(alignment) {
                case 'left': content.classList.add('text-start'); break;
                case 'center': content.classList.add('text-center'); break;
                case 'right': content.classList.add('text-end'); break;
            }
        }
    };

    window.updateFontFamily = function(select) {
        const block = select.closest('.draggable-block');
        const content = block.querySelector('.block-content > *');
        content.style.fontFamily = select.value;
    };

    window.updateFontSize = function(select) {
        const block = select.closest('.draggable-block');
        const content = block.querySelector('.block-content > *');
        content.style.fontSize = select.value;
    };

    window.updateFontColor = function(input) {
        const block = input.closest('.draggable-block');
        const content = block.querySelector('.block-content > *');
        content.style.color = input.value;
    };

    window.updateButtonText = function(input) {
        const block = input.closest('.draggable-block');
        const button = block.querySelector('.block-content .btn');
        button.textContent = input.value;
    };

    window.updateButtonUrl = function(input) {
        const block = input.closest('.draggable-block');
        const button = block.querySelector('.block-content .btn');
        button.href = input.value;
    };

    window.updateButtonTarget = function(select) {
        const block = select.closest('.draggable-block');
        const button = block.querySelector('.block-content .btn');
        button.target = select.value;
    };

    window.updateButtonFont = function(select) {
        const block = select.closest('.draggable-block');
        const button = block.querySelector('.block-content .btn');
        button.style.fontFamily = select.value;
    };

    window.updateButtonFontSize = function(select) {
        const block = select.closest('.draggable-block');
        const button = block.querySelector('.block-content .btn');
        button.style.fontSize = select.value;
    };

    window.updateButtonFontWeight = function(select) {
        const block = select.closest('.draggable-block');
        const button = block.querySelector('.block-content .btn');
        button.style.fontWeight = select.value;
    };

    window.updateButtonWidth = function(input) {
        const block = input.closest('.draggable-block');
        const button = block.querySelector('.block-content .btn');
        const valueDisplay = input.parentElement.querySelector('.width-value');
        const widthPercent = input.value;
        
        button.style.width = `${widthPercent}%`;
        valueDisplay.textContent = `${widthPercent}%`;
    };

    window.updateButtonResponsive = function(checkbox) {
        const block = checkbox.closest('.draggable-block');
        const button = block.querySelector('.block-content .btn');
        
        if (checkbox.checked) {
            button.classList.remove('w-md-100');
            button.classList.add('w-lg-100');
        } else {
            button.classList.remove('w-lg-100');
        }
    };

    window.updateButtonTextColor = function(input) {
        const block = input.closest('.draggable-block');
        const button = block.querySelector('.block-content .btn');
        button.style.color = input.value;
    };

    window.updateButtonBgColor = function(input) {
        const block = input.closest('.draggable-block');
        const button = block.querySelector('.block-content .btn');
        button.style.backgroundColor = input.value;
        button.style.borderColor = input.value;
    };

    window.handleImageUpload = function(input) {
        const block = input.closest('.draggable-block');
        const img = block.querySelector('img');
        
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                img.src = e.target.result;
                img.alt = input.files[0].name;
            };
            
            reader.readAsDataURL(input.files[0]);
        }
    };

    window.handleBulletImageUpload = function(input) {
        const block = input.closest('.draggable-block');
        const content = block.querySelector('.block-content');
        
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                const container = content.querySelector('.container-fluid') || createBulletContainer(content);
                const row = container.querySelector('.row');
                
                let imgCol = row.querySelector('.bullet-image-col');
                if (!imgCol) {
                    imgCol = document.createElement('div');
                    imgCol.className = 'col-md-4 bullet-image-col';
                    row.insertBefore(imgCol, row.firstChild);
                    
                    const bulletCol = row.querySelector('.bullet-list-col');
                    bulletCol.className = 'col-md-8 bullet-list-col';
                }
                
                imgCol.innerHTML = `<img src="${e.target.result}" class="img-fluid" alt="Bullet section image">`;
            };
            
            reader.readAsDataURL(input.files[0]);
        }
    };

    window.removeBulletImage = function(button) {
        const block = button.closest('.draggable-block');
        const content = block.querySelector('.block-content');
        const container = content.querySelector('.container-fluid');
        
        if (container) {
            const imgCol = container.querySelector('.bullet-image-col');
            if (imgCol) {
                imgCol.remove();
                
                const bulletCol = container.querySelector('.bullet-list-col');
                bulletCol.className = 'col-12 bullet-list-col';
            }
        }
    };

    function createBulletContainer(content) {
        const bulletsList = content.querySelector('.bullets-list');
        const container = document.createElement('div');
        container.className = 'container-fluid p-0';
        const row = document.createElement('div');
        row.className = 'row';
        
        const bulletCol = document.createElement('div');
        bulletCol.className = 'col-12 bullet-list-col';
        bulletCol.appendChild(bulletsList);
        
        row.appendChild(bulletCol);
        container.appendChild(row);
        content.appendChild(container);
        
        return container;
    }

    window.updateImageWidth = function(input) {
        const block = input.closest('.draggable-block');
        const img = block.querySelector('img');
        const valueDisplay = input.parentElement.querySelector('.width-value');
        const widthPercent = input.value;
        
        img.style.width = `${widthPercent}%`;
        img.style.height = 'auto';
        valueDisplay.textContent = `${widthPercent}%`;
    };

    window.updateHTML = function(textarea) {
        const block = textarea.closest('.draggable-block');
        const preview = block.querySelector('.html-preview');
        const centerCheckbox = block.querySelector('.form-check-input');
        
        let html = textarea.value;
        
        // Strip PHP tags for preview
        html = html.replace(/<\?php[\s\S]*?\?>/g, '');
        
        if (centerCheckbox && centerCheckbox.checked) {
            preview.innerHTML = `<center>${html}</center>`;
        } else {
            preview.innerHTML = html;
        }
    };

    window.updateBulletFont = function(select) {
        const block = select.closest('.draggable-block');
        const content = block.querySelector('.bullets-list');
        content.style.fontFamily = select.value;
    };

    window.updateBulletTextSize = function(select) {
        const block = select.closest('.draggable-block');
        const content = block.querySelector('.bullets-list span');
        block.querySelectorAll('.bullets-list span').forEach(span => {
            span.style.fontSize = select.value;
        });
    };

    window.updateBulletColor = function(input) {
        const block = input.closest('.draggable-block');
        block.querySelectorAll('.bullets-list span').forEach(span => {
            span.style.color = input.value;
        });
    };

    window.updateBulletIcon = function(select) {
        const block = select.closest('.draggable-block');
        block.querySelectorAll('.bullet-icon').forEach(icon => {
            icon.classList.forEach(cls => {
                if (cls.startsWith('bi-')) {
                    icon.classList.remove(cls);
                }
            });
            icon.classList.add(select.value);
        });
    };

    window.updateBulletIconSize = function(select) {
        const block = select.closest('.draggable-block');
        block.querySelectorAll('.bullet-icon').forEach(icon => {
            icon.style.fontSize = select.value;
        });
    };

    window.updateBulletIconColor = function(input) {
        const block = input.closest('.draggable-block');
        block.querySelectorAll('.bullet-icon').forEach(icon => {
            icon.style.color = input.value;
        });
    };

    window.addBulletPoint = function(button) {
        const block = button.closest('.draggable-block');
        const list = block.querySelector('.bullets-list');
        const template = list.querySelector('li').cloneNode(true);
        template.querySelector('span').textContent = 'New bullet point';
        list.appendChild(template);
    };

    window.removeBulletPoint = function(button) {
        const block = button.closest('.draggable-block');
        const list = block.querySelector('.bullets-list');
        const items = list.querySelectorAll('li');
        
        if (items.length > 1) {
            items[items.length - 1].remove();
        }
    };

    function updateDropZonePositions() {
        const dropZones = document.querySelectorAll('.drop-zone');
        dropZones.forEach((zone, index) => {
            zone.dataset.position = index;
        });
    }

    window.formatText = function(format) {
        document.execCommand(format, false, null);
    };

    window.toggleLinkDialog = function() {
        if (!linkDialog) {
            linkDialog = new bootstrap.Modal(document.getElementById('linkDialog'));
        }
        
        currentSelection = window.getSelection().getRangeAt(0);
        
        const linkElement = window.getSelection().anchorNode.parentElement.closest('a');
        const linkInput = document.getElementById('linkUrl');
        linkInput.value = linkElement ? linkElement.href : '';
        
        linkDialog.show();
    };

    window.applyLink = function() {
        const url = document.getElementById('linkUrl').value;
        if (!url) return;
        
        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(currentSelection);
        
        document.execCommand('createLink', false, url);
        linkDialog.hide();
    };

    window.removeLink = function() {
        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(currentSelection);
        
        document.execCommand('unlink', false, null);
        linkDialog.hide();
    };

    window.saveCanvasAsHtml = async function() {
        const pageTitle = document.getElementById('pageTitle').value || 'Saved Canvas Content';
        const metaKeywords = document.getElementById('metaKeywords').value;
        const metaDescription = document.getElementById('metaDescription').value;
        const retargetingCode = document.getElementById('retargetingCode').value; 
        const canvas = document.getElementById('canvas');
        const blocks = Array.from(canvas.querySelectorAll('.draggable-block'));
        const zip = new JSZip();
        const imageFiles = [];
        let imageCounter = 0;

        for (const block of blocks) {
            if (block.dataset.blockType === 'image') {
                const img = block.querySelector('img');
                if (img && img.src && !img.src.startsWith('https://via.placeholder.com')) {
                    try {
                        const response = await fetch(img.src);
                        const blob = await response.blob();
                        const extension = blob.type.split('/')[1];
                        const filename = `image${imageCounter}.${extension}`;
                        imageFiles.push({
                            originalSrc: img.src,
                            newSrc: filename
                        });
                        zip.file(filename, blob);
                        imageCounter++;
                    } catch (error) {
                        console.error('Error processing image:', error);
                    }
                }
            }

            if (block.dataset.blockType === 'bullets') {
                const bulletImage = block.querySelector('.bullet-image-col img');
                if (bulletImage && !bulletImage.src.startsWith('https://via.placeholder.com')) {
                    try {
                        const response = await fetch(bulletImage.src);
                        const blob = await response.blob();
                        const extension = blob.type.split('/')[1];
                        const filename = `image${imageCounter}.${extension}`;
                        imageFiles.push({
                            originalSrc: bulletImage.src,
                            newSrc: filename
                        });
                        zip.file(filename, blob);
                        imageCounter++;
                    } catch (error) {
                        console.error('Error processing bullet image:', error);
                    }
                }
            }
        }

        let content = blocks.map(block => {
            const blockContent = block.querySelector('.block-content');
            const contentClone = blockContent.cloneNode(true);
            
            contentClone.querySelectorAll('[contenteditable]').forEach(el => {
                el.removeAttribute('contenteditable');
            });

            const alignmentClasses = ['text-start', 'text-center', 'text-end']
                .filter(cls => blockContent.classList.contains(cls));

            if (block.dataset.blockType === 'bullets') {
                const container = contentClone.querySelector('.container-fluid');
                if (container) {
                    const imgCol = container.querySelector('.bullet-image-col img');
                    if (imgCol) {
                        const imageFile = imageFiles.find(f => f.originalSrc === imgCol.src);
                        if (imageFile) {
                            imgCol.src = `<?php echo plugins_url('assets/${imageFile.newSrc}', __FILE__); ?>`;
                        }
                    }
                    return container.outerHTML;
                }
            }

            if (block.dataset.blockType === 'image') {
                const img = contentClone.querySelector('img');
                const imageFile = imageFiles.find(f => f.originalSrc === img.src);
                if (imageFile) {
                    img.src = `<?php echo plugins_url('assets/${imageFile.newSrc}', __FILE__); ?>`;
                }
            }

            if (block.dataset.blockType === 'code') {
                const codeEditor = block.querySelector('.code-editor');
                if (codeEditor) {
                    return `<?php 
                    if (isset($html_blocks['block_${blocks.indexOf(block)}'])) {
                        echo $html_blocks['block_${blocks.indexOf(block)}'];
                    }
                    ?>`;
                }
                return '';
            }

            if (alignmentClasses.length > 0) {
                const wrapper = document.createElement('div');
                wrapper.className = alignmentClasses.join(' ');
                wrapper.innerHTML = contentClone.innerHTML;
                return wrapper.outerHTML;
            }

            return contentClone.innerHTML;
        }).join('\n');

        const htmlContent = `<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${pageTitle}</title>
    ${metaKeywords ? `<meta name="keywords" content="${metaKeywords}">` : ''}
    ${metaDescription ? `<meta name="description" content="${metaDescription}">` : ''}
    ${retargetingCode || ''} 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    ${document.querySelector('link[href*="fonts.googleapis.com"]').outerHTML}
    <style>
    body { padding: 20px 0; }
    .container > * { margin-bottom: 2rem; }
    .bullet-image-col { 
        display: flex; 
        justify-content: center; 
        align-items: center; 
    }
    .bullet-list-col { 
        display: flex; 
        justify-content: center; 
        align-items: center; 
    }
    .bullets-list { width: 100%; }
    @media (max-width: 991.98px) {
        .w-lg-100 {
            width: 100% !important;
        }
    }
    </style>
</head>
<body>
    <div class="container">
        ${content}
    </div>
</body>
</html>`;

        zip.file('index.html', htmlContent);

        zip.generateAsync({type: 'blob'})
            .then(function(content) {
                const url = window.URL.createObjectURL(content);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'canvas-content.zip';
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);
            });
    };

    window.saveAsWordPressPlugin = async function() {
        const pluginName = document.getElementById('pluginName').value || 'My Landing Page Plugin';
        const pluginMenuTitle = document.getElementById('pluginMenuTitle').value || 'My Landing Page';
        const pluginDescription = document.getElementById('pluginDescription').value || 'Custom landing page created with Landing Page Generator';
        const pluginVersion = document.getElementById('pluginVersion').value || '1.0';
        const pluginAuthor = document.getElementById('pluginAuthor').value || 'Landing Page Generator';
        const pageTitle = document.getElementById('pageTitle').value || 'My Page';
        const pageSlug = document.getElementById('pageSlug').value || 'landing-page'; 
        const canvas = document.getElementById('canvas');
        const blocks = Array.from(canvas.querySelectorAll('.draggable-block'));
        const zip = new JSZip();
        const imageFiles = [];
        let imageCounter = 0;

        for (const block of blocks) {
            if (block.dataset.blockType === 'image') {
                const img = block.querySelector('img');
                if (img && img.src && !img.src.startsWith('https://via.placeholder.com')) {
                    try {
                        const response = await fetch(img.src);
                        const blob = await response.blob();
                        const extension = blob.type.split('/')[1];
                        const filename = `image${imageCounter}.${extension}`;
                        imageFiles.push({
                            originalSrc: img.src,
                            newSrc: filename
                        });
                        zip.file(`assets/${filename}`, blob);
                        imageCounter++;
                    } catch (error) {
                        console.error('Error processing image:', error);
                    }
                }
            }

            if (block.dataset.blockType === 'bullets') {
                const bulletImage = block.querySelector('.bullet-image-col img');
                if (bulletImage && !bulletImage.src.startsWith('https://via.placeholder.com')) {
                    try {
                        const response = await fetch(bulletImage.src);
                        const blob = await response.blob();
                        const extension = blob.type.split('/')[1];
                        const filename = `image${imageCounter}.${extension}`;
                        imageFiles.push({
                            originalSrc: bulletImage.src,
                            newSrc: filename
                        });
                        zip.file(`assets/${filename}`, blob);
                        imageCounter++;
                    } catch (error) {
                        console.error('Error processing bullet image:', error);
                    }
                }
            }
        }

        let content = blocks.map(block => {
            const blockContent = block.querySelector('.block-content');
            const contentClone = blockContent.cloneNode(true);
            
            contentClone.querySelectorAll('[contenteditable]').forEach(el => {
                el.removeAttribute('contenteditable');
            });

            const alignmentClasses = ['text-start', 'text-center', 'text-end']
                .filter(cls => blockContent.classList.contains(cls));

            if (block.dataset.blockType === 'bullets') {
                const container = contentClone.querySelector('.container-fluid');
                if (container) {
                    const imgCol = container.querySelector('.bullet-image-col img');
                    if (imgCol) {
                        const imageFile = imageFiles.find(f => f.originalSrc === imgCol.src);
                        if (imageFile) {
                            imgCol.src = `<?php echo plugins_url('assets/${imageFile.newSrc}', __FILE__); ?>`;
                        }
                    }
                    return container.outerHTML;
                }
            }

            if (block.dataset.blockType === 'image') {
                const img = contentClone.querySelector('img');
                const imageFile = imageFiles.find(f => f.originalSrc === img.src);
                if (imageFile) {
                    img.src = `<?php echo plugins_url('assets/${imageFile.newSrc}', __FILE__); ?>`;
                }
            }

            if (block.dataset.blockType === 'code') {
                const codeEditor = block.querySelector('.code-editor');
                if (codeEditor) {
                    return `<?php 
                    if (isset($html_blocks['block_${blocks.indexOf(block)}'])) {
                        echo $html_blocks['block_${blocks.indexOf(block)}'];
                    }
                    ?>`;
                }
                return '';
            }

            if (alignmentClasses.length > 0) {
                const wrapper = document.createElement('div');
                wrapper.className = alignmentClasses.join(' ');
                wrapper.innerHTML = contentClone.innerHTML;
                return wrapper.outerHTML;
            }

            return contentClone.innerHTML;
        }).join('\n');

        const pluginPrefix = pluginName.toLowerCase().replace(/[^a-z0-9]/g, '_');
        const pluginPhp = `<?php
/*
Plugin Name: ${pluginName}
Description: ${pluginDescription}
Version: ${pluginVersion}
Author: ${pluginAuthor}
*/

// Prevent direct access to this file
if (!defined('ABSPATH')) {
    exit;
}

// Add menu and submenu items
add_action('admin_menu', function() {
    add_menu_page(
        '${pluginMenuTitle}',
        '${pluginMenuTitle}',
        'manage_options',
        '${pluginPrefix}-landing-page',
        'render_${pluginPrefix}_landing_page',
        'dashicons-admin-page'
    );

    add_submenu_page(
        '${pluginPrefix}-landing-page',
        'Settings',
        'Settings',
        'manage_options',
        '${pluginPrefix}-landing-page-settings',
        'render_${pluginPrefix}_settings_page'
    );
});

// Add settings
add_action('admin_init', function() {
    register_setting('${pluginPrefix}-landing-page-settings', '${pluginPrefix}_landing_page_html_blocks');
    register_setting('${pluginPrefix}-landing-page-settings', '${pluginPrefix}_landing_page_title');
    register_setting('${pluginPrefix}-landing-page-settings', '${pluginPrefix}_landing_page_slug');
    register_setting('${pluginPrefix}-landing-page-settings', '${pluginPrefix}_landing_page_meta_keywords');
    register_setting('${pluginPrefix}-landing-page-settings', '${pluginPrefix}_landing_page_meta_description');
    register_setting('${pluginPrefix}-landing-page-settings', '${pluginPrefix}_landing_page_retargeting');
    register_setting('${pluginPrefix}-landing-page-settings', '${pluginPrefix}_landing_page_thankyou_title');
    register_setting('${pluginPrefix}-landing-page-settings', '${pluginPrefix}_landing_page_thankyou_download_title');
    register_setting('${pluginPrefix}-landing-page-settings', '${pluginPrefix}_landing_page_thankyou_download_text');
    register_setting('${pluginPrefix}-landing-page-settings', '${pluginPrefix}_landing_page_thankyou_download_url');
    register_setting('${pluginPrefix}-landing-page-settings', '${pluginPrefix}_landing_page_thankyou_footer');
    register_setting('${pluginPrefix}-landing-page-settings', '${pluginPrefix}_landing_page_thankyou_access_key');
});

// Function to get the current slug
function get_${pluginPrefix}_landing_page_slug() {
    return get_option('${pluginPrefix}_landing_page_slug', '${pageSlug}');
}

// Handle custom template for the landing page
add_action('template_redirect', function() {
    $current_url = trim(parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH), '/');
    $slug = get_${pluginPrefix}_landing_page_slug();
    
    if ($current_url === $slug) {
        // Check for thanks parameter
        if (isset($_GET['thanks']) && $_GET['thanks'] === get_option('${pluginPrefix}_landing_page_thankyou_access_key', '9242')) {
            // Get Thank You page settings
            $thankyou_title = get_option('${pluginPrefix}_landing_page_thankyou_title', 'Thank You');
            $thankyou_download_title = get_option('${pluginPrefix}_landing_page_thankyou_download_title', 'Your Download');
            $thankyou_download_text = get_option('${pluginPrefix}_landing_page_thankyou_download_text', 'Click here to download');
            $thankyou_download_url = get_option('${pluginPrefix}_landing_page_thankyou_download_url', 'https://');
            $thankyou_footer = get_option('${pluginPrefix}_landing_page_thankyou_footer', '');
            ?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo esc_html($thankyou_title); ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 40px 20px;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        h1 {
            font-size: 36px;
            margin-bottom: 30px;
        }
        h2 {
            font-size: 24px;
            margin-bottom: 20px;
        }
        .download-section {
            margin: 40px 0;
        }
        .download-link {
            display: inline-block;
            padding: 12px 24px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        .download-link:hover {
            background-color: #0056b3;
        }
        .footer-text {
            margin-top: 40px;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <h1><?php echo esc_html($thankyou_title); ?></h1>
    
    <div class="download-section">
        <h2><?php echo esc_html($thankyou_download_title); ?></h2>
        <?php if ($thankyou_download_url && $thankyou_download_text): ?>
            <a href="<?php echo esc_url($thankyou_download_url); ?>" class="download-link" target="_blank">
                <?php echo esc_html($thankyou_download_text); ?>
            </a>
        <?php endif; ?>
    </div>

    <?php if ($thankyou_footer): ?>
        <div class="footer-text">
            <?php echo wp_kses_post($thankyou_footer); ?>
        </div>
    <?php endif; ?>
</body>
</html>
            <?php
            exit;
        }
        
        // Regular landing page content
        $page_title = get_option('${pluginPrefix}_landing_page_title', '${pageTitle}');
        $meta_keywords = get_option('${pluginPrefix}_landing_page_meta_keywords', '');
        $meta_description = get_option('${pluginPrefix}_landing_page_meta_description', '');
        $retargeting_code = get_option('${pluginPrefix}_landing_page_retargeting', '');
        $html_blocks = get_${pluginPrefix}_html_blocks();
        
        // Start output buffering
        ob_start();
        ?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo esc_html($page_title); ?></title>
    <?php if ($meta_keywords): ?>
    <meta name="keywords" content="<?php echo esc_attr($meta_keywords); ?>">
    <?php endif; ?>
    <?php if ($meta_description): ?>
    <meta name="description" content="<?php echo esc_attr($meta_description); ?>">
    <?php endif; ?>
    <?php echo $retargeting_code; ?>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Lato:wght@400;700&family=Montserrat:wght@400;700&family=Playfair+Display:wght@400;700&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
    <style>
    body { padding: 20px 0; }
    .container > * { margin-bottom: 2rem; }
    .bullet-image-col { 
        display: flex; 
        justify-content: center; 
        align-items: center; 
    }
    .bullet-list-col { 
        display: flex; 
        justify-content: center; 
        align-items: center; 
    }
    .bullets-list { width: 100%; }
    @media (max-width: 991.98px) {
        .w-lg-100 {
            width: 100% !important;
        }
    }
    </style>
</head>
<body>
    <div class="container">
        ${content}
    </div>
</body>
</html>
        <?php
        $html = ob_get_clean();
        echo $html;
        exit;
    }
});

// Add rewrite rules
add_action('init', function() {
    $slug = get_${pluginPrefix}_landing_page_slug();
    add_rewrite_rule('^' . $slug . '/?$', 'index.php?${pluginPrefix}_landing_page=1', 'top');
    flush_rewrite_rules();
});

// Get HTML blocks with their content
function get_${pluginPrefix}_html_blocks() {
    $saved_blocks = get_option('${pluginPrefix}_landing_page_html_blocks', array());
    $default_blocks = array();

   // Only add code blocks from current canvas
${blocks.map((block, index) => {
    if (block.dataset.blockType === 'code') {
        const codeEditor = block.querySelector('.code-editor');
        // Guardar el valor sin sanitización
        return `$default_blocks['block_${index}'] = '${codeEditor.value.replace(/'/g, "\\'")}';\n`;
    }
    return '';
}).join('')}




    return wp_parse_args($saved_blocks, $default_blocks);
}

// Render settings page
function render_${pluginPrefix}_settings_page() {
    if (!current_user_can('manage_options')) {
        return;
    }

    $html_blocks = get_${pluginPrefix}_html_blocks();
    $success_message = '';

    if (isset($_POST['submit'])) {
        check_admin_referer('${pluginPrefix}_landing_page_settings');
        
        // Initialize array to store updated blocks
        $new_blocks = array();

        
        foreach ($html_blocks as $key => $value) {
          if (isset($_POST[$key])) {
            // Guardar el contenido sin sanitizar porque el usuario ingresa HTML code.
            //  $new_blocks[$key] = $_POST[$key];
                $new_blocks[$key] = stripslashes($_POST[$key]);

            }
        }

        
        // Save updated blocks and refresh the html_blocks variable
        update_option('${pluginPrefix}_landing_page_html_blocks', $new_blocks);
        $html_blocks = $new_blocks;  // Update the variable with new values

        // Save page settings
        update_option('${pluginPrefix}_landing_page_title', wp_unslash($_POST['page_title']));
        update_option('${pluginPrefix}_landing_page_slug', sanitize_title(wp_unslash($_POST['page_slug'])));
        update_option('${pluginPrefix}_landing_page_meta_keywords', wp_unslash($_POST['meta_keywords']));
        update_option('${pluginPrefix}_landing_page_meta_description', wp_unslash($_POST['meta_description']));
        update_option('${pluginPrefix}_landing_page_retargeting', wp_unslash($_POST['retargeting_code']));

        // Add Thank You Page settings
        update_option('${pluginPrefix}_landing_page_thankyou_title', wp_unslash($_POST['thankyou_title']));
        update_option('${pluginPrefix}_landing_page_thankyou_download_title', wp_unslash($_POST['thankyou_download_title']));
        update_option('${pluginPrefix}_landing_page_thankyou_download_text', wp_unslash($_POST['thankyou_download_text']));
        update_option('${pluginPrefix}_landing_page_thankyou_download_url', wp_unslash($_POST['thankyou_download_url']));
        update_option('${pluginPrefix}_landing_page_thankyou_footer', wp_unslash($_POST['thankyou_footer']));
        update_option('${pluginPrefix}_landing_page_thankyou_access_key', wp_unslash($_POST['thankyou_access_key']));

        // Flush rewrite rules after slug update
        flush_rewrite_rules();
        
        $success_message = '<div class="notice notice-success is-dismissible"><p>Settings saved successfully.</p></div>';
    }

    // Get current page settings
    $page_title = get_option('${pluginPrefix}_landing_page_title', '${pageTitle}');
    $page_slug = get_option('${pluginPrefix}_landing_page_slug', '${pageSlug}');
    $meta_keywords = get_option('${pluginPrefix}_landing_page_meta_keywords', '');
    $meta_description = get_option('${pluginPrefix}_landing_page_meta_description', '');
    $retargeting_code = get_option('${pluginPrefix}_landing_page_retargeting', '');

    // Get current Thank You Page settings
    $thankyou_title = get_option('${pluginPrefix}_landing_page_thankyou_title', 'Thank You');
    $thankyou_download_title = get_option('${pluginPrefix}_landing_page_thankyou_download_title', 'Your Download');
    $thankyou_download_text = get_option('${pluginPrefix}_landing_page_thankyou_download_text', 'Click here to download');
    $thankyou_download_url = get_option('${pluginPrefix}_landing_page_thankyou_download_url', 'https://');
    $thankyou_footer = get_option('${pluginPrefix}_landing_page_thankyou_footer', '');
    $thankyou_access_key = get_option('${pluginPrefix}_landing_page_thankyou_access_key', '9242');

    ?>
    <div class="wrap">
        <h1>Landing Page Settings</h1>
        <?php echo $success_message; ?>
        <form method="post" action="">
            <?php wp_nonce_field('${pluginPrefix}_landing_page_settings'); ?>
            
            <h2>Page Settings</h2>
            <table class="form-table">
                <tr>
                    <th scope="row"><label for="page_title">Page Title</label></th>
                    <td><input type="text" id="page_title" name="page_title" value="<?php echo esc_attr($page_title); ?>" class="regular-text"></td>
                </tr>
                <tr>
                    <th scope="row"><label for="page_slug">Page Slug</label></th>
                    <td>
                        <input type="text" id="page_slug" name="page_slug" value="<?php echo esc_attr($page_slug); ?>" class="regular-text">
                        <p class="description">The URL path where this page will be accessible (e.g., "landing-page" will make the page available at <?php echo home_url('/'); ?><strong>landing-page</strong>)</p>
                    </td>
                </tr>
                <tr>
                    <th scope="row"><label for="meta_keywords">Meta Keywords</label></th>
                    <td><input type="text" id="meta_keywords" name="meta_keywords" value="<?php echo esc_attr($meta_keywords); ?>" class="regular-text"></td>
                </tr>
                <tr>
                    <th scope="row"><label for="meta_description">Meta Description</label></th>
                    <td><textarea id="meta_description" name="meta_description" rows="3" class="large-text"><?php echo esc_textarea($meta_description); ?></textarea></td>
                </tr>
                <tr>
                    <th scope="row"><label for="retargeting_code">Retargeting Code</label></th>
                    <td><textarea id="retargeting_code" name="retargeting_code" rows="5" class="large-text"><?php echo esc_textarea($retargeting_code); ?></textarea></td>
                </tr>
            </table>

            <h2 class="title">HTML Code Blocks</h2>
          


<?php 
$counter = 1; // Inicializar el contador en 1
foreach ($html_blocks as $key => $value): ?>
    <div style="margin-bottom: 20px;">
        <h3>HTML Block <?php echo $counter; ?></h3> <!-- Usar el contador en lugar de substr -->
        <textarea name="<?php echo esc_attr($key); ?>" rows="10" style="width: 100%;"><?php echo $value; ?></textarea>
    </div>
<?php 
    $counter++; // Incrementar el contador
endforeach; 
?>


          
            <h2>Thank You Page Settings</h2>
            <table class="form-table">
                <tr>
                    <th scope="row"><label for="thankyou_title">Thank You Page Title</label></th>
                    <td>
                        <input type="text" id="thankyou_title" name="thankyou_title" value="<?php echo esc_attr($thankyou_title); ?>" class="regular-text">
                    </td>
                </tr>
                <tr>
                    <th scope="row"><label for="thankyou_download_title">Download Link Title</label></th>
                    <td>
                        <input type="text" id="thankyou_download_title" name="thankyou_download_title" value="<?php echo esc_attr($thankyou_download_title); ?>" class="regular-text">
                    </td>
                </tr>
                <tr>
                    <th scope="row"><label for="thankyou_download_text">Download Link Text</label></th>
                    <td>
                        <input type="text" id="thankyou_download_text" name="thankyou_download_text" value="<?php echo esc_attr($thankyou_download_text); ?>" class="regular-text">
                    </td>
                </tr>
                <tr>
                    <th scope="row"><label for="thankyou_download_url">Download Link URL</label></th>
                    <td>
                        <input type="text" id="thankyou_download_url" name="thankyou_download_url" 
                               value="<?php echo esc_attr($thankyou_download_url); ?>" 
                               class="regular-text">
                    </td>
                </tr>
                <tr>
                    <th scope="row"><label for="thankyou_footer">Footer Text</label></th>
                    <td>
                        <textarea id="thankyou_footer" name="thankyou_footer" rows="3" class="large-text"><?php echo $thankyou_footer; ?></textarea>
                    </td>
                </tr>
                <tr>
                    <th scope="row"><label for="thankyou_access_key">Access Key</label></th>
                    <td>
                        <input type="text" id="thankyou_access_key" name="thankyou_access_key" 
                               value="<?php echo esc_attr($thankyou_access_key); ?>" 
                               class="regular-text">
                        <p class="description">The key that must be passed as ?thanks=key to access the thank you page</p>
                    </td>
                </tr>
                <input type="hidden" name="thankyou_enabled" value="1">
            </table>

            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}

// Render landing page menu
function render_${pluginPrefix}_landing_page() {
    $slug = get_${pluginPrefix}_landing_page_slug();
    $access_key = get_option('${pluginPrefix}_landing_page_thankyou_access_key', '9242');
    ?>
    <div class="wrap">
        <h1>Landing Page</h1>
        <p>View the live page here: <a href="<?php echo home_url($slug); ?>" target="_blank"><?php echo home_url($slug); ?></a></p>
        <p>View the thank you page here: <a href="<?php echo home_url($slug . '?thanks=' . $access_key); ?>" target="_blank"><?php echo home_url($slug . '?thanks=' . $access_key); ?></a></p>
        <p>Configure page settings and HTML blocks in the <a href="<?php echo admin_url('admin.php?page=${pluginPrefix}-landing-page-settings'); ?>">Settings</a> page.</p>
    </div>
    <?php
}

// Register activation hook
register_activation_hook(__FILE__, function() {
    $slug = get_${pluginPrefix}_landing_page_slug();
    add_rewrite_rule('^' . $slug . '/?$', 'index.php?${pluginPrefix}_landing_page=1', 'top');
    flush_rewrite_rules();
});

// Register deactivation hook
register_deactivation_hook(__FILE__, function() {
    flush_rewrite_rules();
});
`;

        zip.file('custom-landing-page.php', pluginPhp);
        if (!zip.folder('assets')) {
            zip.folder('assets');
        }

        zip.generateAsync({type: 'blob'})
            .then(function(content) {
                const url = window.URL.createObjectURL(content);
                const a = document.createElement('a');
                a.href = url;
                a.download = `${pluginName.toLowerCase().replace(/[^a-z0-9]/g, '-')}.zip`;
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);
            });
    };

});

window.togglePageSettings = function() {
    const content = document.getElementById('pageSettingsContent');
    const icon = document.getElementById('pageSettingsIcon');
    
    if (content.style.display === 'none') {
        content.style.display = 'block';
        icon.classList.remove('bi-chevron-down');
        icon.classList.add('bi-chevron-up');
    } else {
        content.style.display = 'none';
        icon.classList.remove('bi-chevron-up');
        icon.classList.add('bi-chevron-down');
    }
};

window.togglePluginSettings = function() {
    const content = document.getElementById('pluginSettingsContent');
    const icon = document.getElementById('pluginSettingsIcon');

    if (content.style.display === 'none') {
        content.style.display = 'block';
        icon.classList.remove('bi-chevron-down');
        icon.classList.add('bi-chevron-up');
    } else {
        content.style.display = 'none';
        icon.classList.remove('bi-chevron-up');
        icon.classList.add('bi-chevron-down');
    }
};

window.toggleThankYouPageSettings = function() {
    const content = document.getElementById('thankYouPageSettingsContent');
    const icon = document.getElementById('thankYouPageSettingsIcon');

    if (content.style.display === 'none') {
        content.style.display = 'block';
        icon.classList.remove('bi-chevron-down');
        icon.classList.add('bi-chevron-up');
    } else {
        content.style.display = 'none';
        icon.classList.remove('bi-chevron-up');
        icon.classList.add('bi-chevron-down');
    }
};

clearCanvas(); 

</script>

</body>
</html>