OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	03/26/2025 04:21:24 AM	rwxr-xr-x
📄 Edit-arvind-index.php	61.9 KB	03/26/2025 04:16:33 AM	rw-r--r--
📁 NW_images	-	03/26/2025 04:21:28 AM	rwxr-xr-x
📄 aditya_index.php	44.57 KB	03/26/2025 04:16:33 AM	rw-r--r--
📄 arvind-save-template.php	3.75 KB	03/26/2025 04:16:33 AM	rw-r--r--
📄 arvinds-index.php	52.82 KB	03/26/2025 04:16:33 AM	rw-r--r--
📁 assets	-	03/26/2025 04:21:24 AM	rwxr-xr-x
📄 db_gallery.php	285 bytes	03/26/2025 04:16:33 AM	rw-r--r--
📄 delete_image.php	646 bytes	03/26/2025 04:16:33 AM	rw-r--r--
📄 edit_template.php	658 bytes	03/26/2025 04:16:33 AM	rw-r--r--
📄 fetch_data.php	779 bytes	03/26/2025 04:16:33 AM	rw-r--r--
📄 fetch_titles.php	0 bytes	03/26/2025 04:16:33 AM	rw-r--r--
📁 images10	-	03/26/2025 04:20:38 AM	rwxr-xr-x
📁 images11	-	03/26/2025 04:20:38 AM	rwxr-xr-x
📁 images12	-	03/26/2025 04:20:38 AM	rwxr-xr-x
📁 images13	-	03/26/2025 04:20:39 AM	rwxr-xr-x
📁 images14	-	03/26/2025 04:20:40 AM	rwxr-xr-x
📁 images15	-	03/26/2025 04:20:43 AM	rwxr-xr-x
📁 images16	-	03/26/2025 04:20:43 AM	rwxr-xr-x
📁 images17	-	03/26/2025 04:20:44 AM	rwxr-xr-x
📁 images18	-	03/26/2025 04:20:44 AM	rwxr-xr-x
📁 images19	-	03/26/2025 04:20:45 AM	rwxr-xr-x
📁 images2	-	03/26/2025 04:20:47 AM	rwxr-xr-x
📁 images20	-	03/26/2025 04:20:47 AM	rwxr-xr-x
📁 images21	-	03/26/2025 04:20:48 AM	rwxr-xr-x
📁 images3	-	03/26/2025 04:20:52 AM	rwxr-xr-x
📁 images4	-	03/26/2025 04:20:52 AM	rwxr-xr-x
📁 images5	-	03/26/2025 04:20:54 AM	rwxr-xr-x
📁 images6	-	03/26/2025 04:20:54 AM	rwxr-xr-x
📁 images7	-	03/26/2025 04:20:56 AM	rwxr-xr-x
📁 images8	-	03/26/2025 04:20:56 AM	rwxr-xr-x
📁 images9	-	03/26/2025 04:20:57 AM	rwxr-xr-x
📄 index.php	45.3 KB	03/26/2025 04:16:33 AM	rw-r--r--
📄 load_template.php	2.2 KB	03/26/2025 04:16:33 AM	rw-r--r--
📁 newsletter	-	03/26/2025 04:21:25 AM	rwxr-xr-x
📄 nleditor_navbar.php	10.1 KB	03/26/2025 04:16:33 AM	rw-r--r--
📄 save-template.php	2.45 KB	03/26/2025 04:16:33 AM	rw-r--r--
📄 script.js	34.02 KB	03/26/2025 04:16:33 AM	rw-r--r--
📄 styles.css	2.43 KB	03/26/2025 04:16:33 AM	rw-r--r--
📄 template1.jpg	0 bytes	03/26/2025 04:16:33 AM	rw-r--r--
📄 test.php	1.58 KB	03/26/2025 04:16:33 AM	rw-r--r--
📄 test_index.php	46.51 KB	03/26/2025 04:16:33 AM	rw-r--r--
📄 texts.txt	1.7 KB	03/26/2025 04:16:33 AM	rw-r--r--
📄 upload.php	858 bytes	03/26/2025 04:16:33 AM	rw-r--r--
📁 uploads	-	03/26/2025 04:20:57 AM	rwxr-xr-x

Editing: arvinds-index.php

<? include '../assets/php/validate.logged.php'; ?>

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newsletter Template Editor</title>
    <script src="../../assets/js/interact.js"></script>
    <script src="script.js"></script>
    
    
    
    <link rel="stylesheet" href="../../assets/css/bootstrap.min.4.5.0.css"  />
    <link rel="stylesheet" href="../assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/addText.css">
    <script src="../../assets/js/jquery-3.6.0.min.js"></script>
    
    <script src="../../assets/js/bootstrap.min.4.5.js" ></script>
    <script src="../../assets/js/Chart.min.2.8.js" crossorigin="anonymous"></script>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 450;
            right: 0;
            top: 0;
            width: 30%;
            height: 100vh;
            overflow: auto;
            background-color: #fafafa;
            margin-top: 15vh;
            margin-left: 30px;

}
    </style>
</head>

<?php include "nleditor_navbar.php" ?>

<body>
    <div class="body">
        <div class="sidebar">
            <h2>Templates</h2>
            <div class="template-list">
                <div class="template" data-template="template_1" data-category="basic_newsletter">
                    <span>Basic Newsletter</span>
                </div>
                <div class="template" data-template="template_2" data-category="modern_layout">
                    <span>Modern Layout</span>
                </div>
                <div class="template" data-template="template_3" data-category="professional">
                    <span>Professional</span>
                </div>
                <div class="template" data-template="template_4" data-category="minimal_desing">
                    <span>Minimal Design</span>
                </div>
                <div class="template" data-template="template_5" data-category="creative_style">
                    <span>Creative Style</span>
                </div>
            </div>
            <button onclick="window.location.href='../choose_template.php'">Back To My Templates</button>

</div>

</div>

<div id="myModal" class="modal" style="z-index: 450;">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>Collection Modal</h2>
                <div id="modalContent">
                    
                </div>
            </div>
        </div>

// Create the URL of the PHP endpoint for category-based fetching
                        const templateUrl = `load_template.php?category=${category}`;

// Create a new div element for the template content
                        const newDiv = $('<div class="new-div"></div>');

// Show loading message while fetching
                        newDiv.html('<p>Loading templates...</p>');

// Append the new div to the new-div-container
                        $('#new-div-container').empty().append(newDiv); // Clear previous content before appending

// Fetch the template data from the server using the PHP endpoint
                        $.ajax({
                            url: templateUrl, // The PHP endpoint
                            method: 'GET', // HTTP method to use
                            success: function(response) {
                                // Check if response contains templates (using data-template-path)
                                if (response.includes('data-template-path')) {
                                    // Parse the response and display the templates
                                    const templatesContainer = $(response); // Assuming multiple templates are returned

// Insert each template into the new div
                                    newDiv.html(templatesContainer);

// Add click event for each template
                                    newDiv.find('.template').each(function() {
                                        $(this).on('click', function() {
                                            // Get the template's path and image details
                                            const templatePath = $(this).data('template-path');
                                            const imagePath = $(this).find('img').attr('src');

// Handle template selection: Update canvas area
                                            const canvasArea = $('#canvasArea');
                                            canvasArea.empty(); // Clear the current content

// Fetch and display the template content in the canvas area
                                            $.ajax({
                                                url: templatePath,
                                                method: 'GET',
                                                success: function(templateContent) {
                                                    // Insert the template content into the canvas area
                                                    canvasArea.html(templateContent);

// Make all text elements editable
                                                    makeElementsEditable();

// Set up image uploads
                                                    setupImageUploads();

// Add save button functionality
                                                    addSaveButton(templatePath);
                                                },
                                                error: function(xhr, status, error) {
                                                    canvasArea.html(`<p>Error loading template: ${error}</p>`);
                                                }
                                            });
                                        });
                                    });
                                } else {
                                    // Handle error if no templates are returned
                                    newDiv.html('<p>No templates found for this category.</p>');
                                }
                            },
                            error: function(xhr, status, error) {
                                // If there's an error (e.g., file not found), show an error message
                                newDiv.html(`<p>Error: ${error}</p>`);
                            }
                        });
                    });
                });
            });
        </script>

// Function to close the modal
            function closeModal() {
                var modal = document.getElementById("myModal");
                modal.style.display = "none"; // Hide the modal
            }

// Get the button that triggers the modal
            var collectionBtn = document.getElementById("collectionBtn");

// Add click event listener to the "Collection" button
            collectionBtn.addEventListener("click", function() {
                fetchData(); // Fetch data when the button is clicked
                showModal(); // Show the modal
            });

// Close the modal when the <span> (close button) is clicked
            document.getElementsByClassName("close")[0].addEventListener("click", closeModal);

// Close the modal if the user clicks outside the modal content
            window.addEventListener("click", function(event) {
                var modal = document.getElementById("myModal");
                if (event.target === modal) {
                    closeModal();
                }
            });
        </script>

// Remove any existing action icons first to prevent duplicates
                            $('.edit-actions').remove();

// Create action icons container
                            var $actionsContainer = $('<div class="edit-actions"></div>').css({
                                'position': 'absolute',
                                'top': '-30px',
                                'right': '0',
                                'background-color': '#f8f9fa',
                                'border': '1px solid #ddd',
                                'border-radius': '4px',
                                'padding': '5px 8px',
                                'box-shadow': '0 2px 5px rgba(0,0,0,0.1)',
                                'z-index': '1000',
                                'display': 'flex',
                                'gap': '10px'
                            });

// Add edit text icon with tooltip
                            var $editTextBtn = $('<span class="edit-action edit-text-btn" title="Edit Text"></span>').html('<i class="fas fa-edit"></i>')
                                .css({
                                    'cursor': 'pointer',
                                    'color': '#007bff',
                                    'padding': '2px'
                                });

// Add link icon with tooltip
                            var $addLinkBtn = $('<span class="edit-action add-link-btn" title="Add/Edit Link"></span>').html('<i class="fas fa-link"></i>')
                                .css({
                                    'cursor': 'pointer',
                                    'color': '#007bff',
                                    'padding': '2px'
                                });

// Add My Collection button with tooltip
                            var $myCollectionBtn = $('<span class="edit-action my-collection-btn" title="My Collection" id="collectionBtn"></span>').html('<i class="fas fa-folder"></i>')
                                .css({
                                    'cursor': 'pointer',
                                    'color': '#007bff',
                                    'padding': '2px'
                                });

// Append buttons to container
                            $actionsContainer.append($editTextBtn).append($addLinkBtn).append($myCollectionBtn);

// Append container to element
                            $(this).append($actionsContainer);
                        },
                        function() {
                            // Restore original border
                            $(this).css('border', $(this).data('original-border'));

// Hide action icons immediately if not hovering over them
                            if (!$('.edit-actions:hover').length) {
                                $('.edit-actions').remove();
                            }
                        }
                    )

.on('input keyup', function(e) {
                        // Check if the element is empty (considering whitespace)
                        if ($(this).text().trim() === '') {
                            // If element is empty, remove it
                            $(this).remove();
                        }
                    });

// Add event handler for the action icons so they don't disappear immediately when hovered
                $(document).on('mouseleave', '.edit-actions', function() {
                    $(this).remove();
                });
            }

$(document).ready(function() {
                // Add modal HTML to the body
                $('body').append(`
             <div id="myModal" style="display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);">
             <div style="background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 80%;  border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                 <span class="close" style="color: #000; float: right; font-size: 28px; font-weight: bold; cursor: pointer;">&times;</span>
             <h2>My Collection</h2>
             <div id="modalContent" style="margin-top: 15px; max-height: 400px; overflow-y: auto;">
             Loading...
             </div>
             <div style="margin-top: 15px; text-align: right;">
             <button id="insertBtn" style="padding: 8px 16px; color: white; border: none; border-radius: 4px; cursor: pointer;">Insert Selected</button>
             </div>
             </div>
         </div>
     `);

// Initialize the editable elements
                makeElementsEditable();

// Handle click on edit text button
                $(document).on('click', '.edit-text-btn', function(e) {
                    e.stopPropagation();

// Get the parent editable element
                    var $element = $(this).closest('.editable-element');

// Hide the action icons immediately
                    $('.edit-actions').remove();

// Focus on the parent editable element
                    $element.focus();
                });

// Handle click on add link button

$(document).ready(function() {
                    $("#canvasArea").on("click", "a", function(event) {
                        event.preventDefault(); // Prevent default link behavior

let currentHref = $(this).attr("href") || ""; // Get current href
                        let newHref = prompt("Enter new link:", currentHref); // Prompt user for new link

if (newHref !== null && newHref.trim() !== "") {
                            $(this).attr("href", newHref); // Update the href attribute
                        }
                    });
                });

// Handle click on my collection button
                $(document).on('click', '.my-collection-btn', function(e) {
                    e.stopPropagation();

// Get the parent editable element for later reference
                    var $element = $(this).closest('.editable-element');

// Store the current element for later use when inserting content
                    $('#myModal').data('currentElement', $element);

// Hide the action icons immediately
                    $('.edit-actions').remove();

// Run the collection script
                    fetchData();
                    showModal();
                });

// Add Insert Selected button functionality
                $(document).on('click', '#insertBtn', function() {
                    var selectedIds = [];
                    $('input[name="item"]:checked').each(function() {
                        selectedIds.push($(this).val());
                    });

if (selectedIds.length > 0) {
                        // Get the current element where we want to insert the content
                        var $currentElement = $('#myModal').data('currentElement');

// For demonstration, we'll just show a message
                        // In a real implementation, you would fetch the content for these IDs
                        // and insert it into the current element
                        showFeedback($currentElement, selectedIds.length + " item(s) will be inserted");

// Close the modal
                        closeModal();
                    } else {
                        alert("Please select at least one item.");
                    }
                });

// Function to show feedback tooltip
                function showFeedback($element, message) {
                    // Create feedback tooltip
                    var $feedback = $('<div class="edit-feedback"></div>').text(message).css({
                        'position': 'absolute',
                        'top': '-30px',
                        'right': '0',
                        'background-color': '#28a745',
                        'color': 'white',
                        'border-radius': '4px',
                        'padding': '3px 8px',
                        'font-size': '12px',
                        'opacity': '0',
                        'transition': 'opacity 0.3s ease-in-out'
                    });

// Position relative to element
                    $element.css('position', 'relative').append($feedback);

// Show and hide the feedback
                    $feedback.css('opacity', '1');

setTimeout(function() {
                        $feedback.css('opacity', '0');

setTimeout(function() {
                            $feedback.remove();
                        }, 300);
                    }, 1500);
                }

// Function to show the modal
                function showModal() {
                    var modal = document.getElementById("myModal");
                    modal.style.display = "block"; // Show the modal
                }

// Function to close the modal
                function closeModal() {
                    var modal = document.getElementById("myModal");
                    modal.style.display = "none"; // Hide the modal
                }

// Modified fetchData function to create clickable items instead of checkboxes
                function fetchData() {
                    var xhr = new XMLHttpRequest();
                    xhr.open("GET", "fetch_data.php", true);
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            var data = JSON.parse(xhr.responseText);

// Check if there's data
                            if (data.message) {
                                document.getElementById("modalContent").innerHTML = data.message;
                            } else {
                                // Initialize the content for clickable items
                                var content = "";

// Function to limit text to a specific number of words
                                function limitText(text, wordLimit) {
                                    var words = text.split(' ');
                                    if (words.length > wordLimit) {
                                        return words.slice(0, wordLimit).join(' ') + '...';
                                    } else {
                                        return text;
                                    }
                                }

// Function to strip HTML tags
                                function stripHtml(html) {
                                    // Create a temporary div element
                                    var temp = document.createElement('div');
                                    // Set the HTML content
                                    temp.innerHTML = html;
                                    // Return just the text content
                                    return temp.textContent || temp.innerText || '';
                                }

data.forEach(function(item) {
                                    // Strip HTML from title and limit
                                    var cleanTitle = stripHtml(item.title);
                                    var limitedTitle = limitText(cleanTitle, 10);

// Encode content to avoid breaking HTML
                                    var encodedTitle = encodeURIComponent(cleanTitle);

// Create a clickable item div for the heading
                                    content += `
                    <div class="collection-item" data-content="${encodedTitle}" data-type="heading">
                        <div class="item-preview">
                        <strong>Heading:</strong> ${limitedTitle}
                        </div>
                    </div>`;

// For images, use a text placeholder instead of the image HTML
                                    if (item.image) {
                                        content += `
                    <div class="collection-item" data-content="${encodeURIComponent('[Image: ' + cleanTitle + ']')}" data-type="image">
                        <div class="item-preview">
                            <strong>Image:</strong> [Image preview]
                        </div>
                    </div>`;
                                    }

// Clean and create a clickable item div for the description
                                    var cleanDescription = stripHtml(item.description);
                                    var limitedDescription = limitText(cleanDescription, 60);
                                    content += `
                        <div class="collection-item" data-content="${encodeURIComponent(cleanDescription)}" data-type="description">
                            <div class="item-preview">
                                <strong>Description:</strong> ${limitedDescription}
                             </div>
                        </div>`;

// Add clickable items for each paragraph
                                    if (item.paragraphs && Array.isArray(item.paragraphs)) {
                                        item.paragraphs.forEach(function(paragraph, index) {
                                            var cleanParagraph = stripHtml(paragraph);
                                            var limitedParagraph = limitText(cleanParagraph, 60);
                                            content += `
                        <div class="collection-item" data-content="${encodeURIComponent(cleanParagraph)}" data-type="paragraph">
                            <div class="item-preview">
                                <strong>Paragraph ${index + 1}:</strong> ${limitedParagraph}
                            </div>
                        </div>`;
                                        });
                                    }
                                });

// Insert the generated content into the modal
                                document.getElementById("modalContent").innerHTML = content;

// Add styling for the collection items
                                var style = document.createElement('style');
                                style.innerHTML = `
                            .collection-item {
                                margin: 10px 0;
                                padding: 10px;
                                border: 1px solid #ddd;
                                border-radius: 4px;
                                cursor: pointer;
                                transition: background-color 0.2s;
                            }
                            .collection-item:hover {
                                background-color: #f0f8ff;
                            }
                            .item-preview {
                                overflow: hidden;
                            }
                        `;

document.head.appendChild(style);

$('.collection-item').on('click', function() {
                                    // Retrieve the encoded content and decode it
                                    var content = decodeURIComponent($(this).attr('data-content'));
                                    var contentType = $(this).attr('data-type');

// Limit the content to 50 words before inserting
                                    var limitedContent = limitText(content, 60);

// Get the target element where the content should be inserted
                                    var $targetElement = $('#myModal').data('currentElement');

// Insert the limited text content
                                    $targetElement.text(limitedContent);

// Show feedback
                                    showFeedback($targetElement, contentType + " inserted!");

// Close the modal
                                    closeModal();
                                });

}
                        }
                    };
                    xhr.send();
                }

// Update the modal content to remove the Insert Selected button
                $(document).ready(function() {
                    // Update modal HTML
                    $('body').find('#myModal').html(`
                        <div style="background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 80%; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                             <span class="close" style="color: #000; float: right; font-size: 28px; font-weight: bold; cursor: pointer;">&times;</span>
                             <h2>My Collection</h2>
                             <p>Click an item to insert it:</p>
                                <div id="modalContent" style="margin-top: 15px; max-height: 400px; overflow-y: auto;">
                                    Loading...
                                </div>
                        </div>
                    `);
                });

// Close the modal when the <span> (close button) is clicked
                $(document).on('click', '.close', closeModal);

// Close the modal if the user clicks outside the modal content
                $(window).on('click', function(event) {
                    var modal = document.getElementById("myModal");
                    if (event.target === modal) {
                        closeModal();
                    }
                });
            });

// Add Font Awesome if not already included
            if ($('link[href*="font-awesome"]').length === 0 && $('script[src*="font-awesome"]').length === 0) {
                $('head').append('<link rel="stylesheet" href="../../assets/css/all.min.5.15.3.css">');
            }

function setupImageUploads() {
                $('#canvasArea img').each(function() {
                    const img = $(this);
                    const uploadBtn = $('<input type="file" accept="image/*" style="display: none;">').insertAfter(img);

const changeBtn = $('<button class="image-upload-btn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1"/><path d="M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3"/></g></svg></button>').insertAfter(img).css({
                        'position': 'absolute',
                        'background': '#007bff',
                        'color': 'white',
                        'border': 'none',
                        'padding': '5px 10px',
                        'cursor': 'pointer',
                        'z-index': '400'
                        // 'right': '50%'
                        // 'display': 'none'

});

changeBtn.click(function() {
                        uploadBtn.click();
                    });

uploadBtn.change(function(e) {
                        const file = e.target.files[0];
                        if (file) {
                            const formData = new FormData();
                            formData.append('image', file);

$.ajax({
                                url: 'upload.php', // PHP script to handle file upload
                                type: 'POST',
                                data: formData,
                                contentType: false,
                                processData: false,
                                success: function(response) {
                                    if (response.startsWith("uploads/NW_images/")) {
                                        let tempSrc = response; // Temporary src while uploading
                                        img.attr('src', tempSrc);

// After saving, update src by removing "uploads/"
                                        // let finalSrc = response.replace("uploads/", "");
                                        // setTimeout(function() {
                                        //     img.attr('src', finalSrc);
                                        // }, 2000);
                                    } else {
                                        alert('Error: ' + response);
                                    }
                                },
                                error: function() {
                                    alert('Image upload failed.');
                                }
                            });

}
                    });
                });
            }

// Function to save the current state of the template
            function saveTemplate() {
                // Create a loading overlay
                const loadingOverlay = $('<div id="saveLoadingOverlay"></div>')
                    .css({
                        // 'position': 'fixed',
                        // 'top': 0,
                        'right': 0,
                        'width': '100%',
                        'height': '100%',
                        'background-color': 'rgba(0,0,0,0.5)',
                        'z-index': 9999,
                        'display': 'flex',
                        'justify-content': 'center',
                        'align-items': 'center'
                    })
                    .append(
                        $('<div></div>')
                        .css({
                            'background-color': 'white',
                            'padding': '20px',
                            'border-radius': '5px',
                            'text-align': 'center'
                        })
                        .append('<i class="fas fa-spinner fa-spin fa-3x"></i>')
                        .append('<p style="margin-top:10px;">Saving template...</p>')
                    );

$('body').append(loadingOverlay);

// Prompt for template name
                const templateName = prompt('Please enter a name for your template:');

// If user cancels the prompt or enters empty string, abort save
                if (!templateName) {
                    $('#saveLoadingOverlay').remove();
                    return;
                }

// Create the template filename
                const templateFileName = `${templateName}.html`;

// Create FormData to handle both text content and images
                const formData = new FormData();

// Get the current state of the template
                const canvasArea = $('#canvasArea');
                const template = canvasArea.clone();

// Clean up the template by removing editing controls
                template.find('.image-upload-btn, input[type="file"], .edit-actions, #saveTemplate').remove();
                template.find('[contenteditable]').removeAttr('contenteditable');
                template.find('.editable-element').removeClass('editable-element');
                // Modify image src paths
                template.find('img').each(function() {
                    let src = $(this).attr('src');
                    if (src && src.startsWith('uploads/')) {
                        $(this).attr('src', src.replace('uploads/', 'https://knoblycream.com/Xpress/NLEditor/uploads/'));
                    }
                });
                // Get the HTML content
                const htmlContent = template.html();

// Log what we're about to send (for debugging)
                console.log({
                    templateFileName,
                    contentLength: htmlContent.length,
                    contentPreview: htmlContent.substring(0, 100) + '...'
                });

// Add template information to FormData
                formData.append('templateFileName', templateFileName);
                formData.append('template', htmlContent);

// Debug log to confirm we're getting to this point
                console.log('Sending AJAX request to save template');

// Save the template - use the correct path to your PHP file
                $.ajax({
                    // Make sure this path is correct relative to your current page
                    url: 'save-template.php', // Update this path to match your file structure
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        $('#saveLoadingOverlay').remove();
                        console.log('Server response:', response);

try {
                            // Parse response as JSON if it's a string
                            const result = typeof response === 'string' ? JSON.parse(response) : response;

if (result.success) {
                                alert('Template saved successfully!');
                                // Redirect to template selection page
                                window.location.href = '../choose_template.php';
                            } else {
                                // If there is an error from the server, show that error
                                alert('Error saving template: ' + (result.error || 'Unknown error'));
                            }
                        } catch (e) {
                            console.error('Error parsing response:', e);
                            alert('Unexpected response format. Please check the console for details.');
                        }
                    },
                    error: function(xhr, status, error) {
                        $('#saveLoadingOverlay').remove();
                        console.error('Save request failed:', {
                            status,
                            error,
                            responseText: xhr.responseText
                        });

alert('Error saving template: ' + error);
                    }
                });
            }
            // Function to add save button to the canvas area
            function addSaveButton() {
                // Remove any existing save button first
                $('#saveTemplate').remove();

// Create a new save button with proper styling
                const saveBtn = $('<button id="saveTemplate" class="btn btn-primary"></button>')
                    .html('<i class="fas fa-save"></i> Save Template')
                    .css({
                        'position': 'fixed',
                        'top': '94%',
                        'height': ' fit-content',
                        'left': '90%',
                        'z-index': 1000,
                        'padding': '10px 15px',
                        'background-color': '#28a745',
                        'color': 'white',
                        'border': 'none',
                        'border-radius': '4px',
                        'box-shadow': '0 2px 5px rgba(0,0,0,0.2)',
                        'cursor': 'pointer'
                    });

// Add hover effect
                saveBtn.hover(
                    function() {
                        $(this).css('background-color', '#218838');
                    },
                    function() {
                        $(this).css('background-color', '#28a745');
                    }
                );

// Add click event handler
                saveBtn.on('click', function(e) {
                    e.preventDefault();
                    saveTemplate();
                });

// Add the button to the body
                $('body').append(saveBtn);

console.log('Save button added to editor interface');
            }

// Helper function to get unique selector for an element
            $.fn.getPath = function() {
                if (this.length != 1) return false;
                var path = this.prop('tagName').toLowerCase();
                if (this.attr('id')) {
                    path += '#' + this.attr('id');
                } else if (this.attr('class')) {
                    path += '.' + this.attr('class').replace(/\s+/g, '.');
                }
                return path;
            };
        </script>

// If template parameter exists, load the template
                if (templateParam) {
                    loadTemplate(templateParam);
                }
            });

function loadTemplate(templateParam) {
                // Show loading indicator
                $("#canvasArea").html('<div style="text-align:center;padding:50px;"><i class="fas fa-spinner fa-spin fa-3x"></i><p>Loading template...</p></div>');

// Perform AJAX request to load the template
                $.ajax({
                    url: "edit_template.php",
                    type: "GET",
                    data: {
                        template: templateParam
                    },
                    success: function(response) {
                        // Insert the response into the canvas area
                        $("#canvasArea").html(response);

// Make all text elements editable
                        makeElementsEditable();

// Set up image uploads
                        setupImageUploads();

// Add save button functionality (no parameter needed)
                        addSaveButton();
                    },
                    error: function(xhr, status, error) {
                        // Show error message if request fails
                        $("#canvasArea").html('<div class="alert alert-danger">Error loading template: ' + error + '</div>');
                        console.error("Error loading template:", error);
                    }
                });
            }
        </script>

// Add "Add Text" button
                const addTextBtn = $('<button id="addTextBtn" class="btn btn-primary">Add Text</button>').css({
                    'margin-right': '10px'
                });

// Add text color picker
                const colorPicker = $('<input type="color" id="textColorPicker" title="Text Color">').css({
                    'width': '30px',
                    'height': '30px',
                    'padding': '0',
                    'border': '1px solid #ccc',
                    'margin-right': '5px'
                });

// Add font size selector
                const fontSizeSelector = $('<select id="fontSizeSelector" title="Font Size"></select>').css({
                    'padding': '5px',
                    'border': '1px solid #ccc',
                    'border-radius': '3px',
                    'margin-right': '5px'
                });

// Add font size options
                const fontSizes = ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px', '42px', '48px', '64px'];
                fontSizes.forEach(size => {
                    fontSizeSelector.append(`<option value="${size}">${size}</option>`);
                });

// Add font family selector
                const fontFamilySelector = $('<select id="fontFamilySelector" title="Font Family"></select>').css({
                    'padding': '5px',
                    'border': '1px solid #ccc',
                    'border-radius': '3px'
                });

// Add font family options
                const fontFamilies = [
                    'Arial, sans-serif',
                    'Helvetica, sans-serif',
                    'Georgia, serif',
                    'Times New Roman, serif',
                    'Courier New, monospace',
                    'Verdana, sans-serif',
                    'Tahoma, sans-serif',
                    'Impact, sans-serif',
                    'Open Sans, sans-serif',
                    'Roboto, sans-serif'
                ];

fontFamilies.forEach(font => {
                    const fontName = font.split(',')[0];
                    fontFamilySelector.append(`<option value="${font}" style="font-family: ${font}">${fontName}</option>`);
                });

// Append all elements to the toolbar
                toolbar.append(addTextBtn)
                    .append('<span>Color: </span>')
                    .append(colorPicker)
                    .append('<span>Size: </span>')
                    .append(fontSizeSelector)
                    .append('<span>Font: </span>')
                    .append(fontFamilySelector);

// Append the toolbar to the body
                $('body').append(toolbar);

// Add event listener for the Add Text button
                addTextBtn.on('click', function() {
                    const selectedColor = colorPicker.val();
                    const selectedFontSize = fontSizeSelector.val();
                    const selectedFontFamily = fontFamilySelector.val();

// Enable text placement mode
                    enableTextPlacementMode(selectedColor, selectedFontSize, selectedFontFamily);
                });
            }

// Function to enable text placement mode
            function enableTextPlacementMode(color, fontSize, fontFamily) {
                // Create an overlay to indicate text placement mode
                const overlay = $('<div id="textPlacementOverlay"></div>').css({
                    'position': 'absolute',
                    'top': '0',
                    'left': '0',
                    'width': '100%',
                    'height': '100%',
                    // 'background-color': 'rgba(0, 0, 0, 0.1)',
                    'z-index': '900',
                    'cursor': 'crosshair'
                });

// Add a message to the overlay
                const message = $('<div></div>').css({
                    'position': 'fixed',
                    'top': '50%',
                    'left': '50%',
                    'transform': 'translate(-50%, -50%)',
                    'background-color': 'rgba(255, 255, 255, 0.9)',
                    'padding': '15px',
                    'border-radius': '5px',
                    'box-shadow': '0 2px 10px rgba(0, 0, 0, 0.2)',
                    'z-index': '901',
                    'pointer-events': 'none'
                }).text('Click anywhere to add text');

overlay.append(message);
                $('#canvasArea').append(overlay);

// Handle click on the overlay
                overlay.on('click', function(e) {
                    // Get click position relative to the canvas area
                    const canvasOffset = $('#canvasArea').offset();
                    const x = e.pageX - canvasOffset.left;
                    const y = e.pageY - canvasOffset.top;

// Remove the overlay
                    overlay.remove();

// Create a new text element
                    addNewTextElement(x, y, color, fontSize, fontFamily);
                });

// Allow canceling the text placement by pressing Escape
                $(document).one('keydown', function(e) {
                    if (e.key === 'Escape') {
                        overlay.remove();
                    }
                });
            }

// Function to add a new text element at the specified position
            function addNewTextElement(x, y, color, fontSize, fontFamily) {
                // Create a new paragraph element
                const newText = $('<p>Your text here</p>').css({
                        'position': 'absolute',
                        'left': x + 'px',
                        'top': y + 'px',
                        'width:':'max-content',
                        'color': color,
                        'font-size': fontSize,
                        'font-family': fontFamily,
                        'margin': '0',
                        'padding': '5px',
                        'cursor': 'move',
                        'z-index': '10'
                    }).attr('contenteditable', 'true')
                    .addClass('editable-element')
                    .attr('data-draggable', 'true');

// Add the new text to the canvas
                $('#canvasArea').append(newText);

// Focus on the new text element
                newText.focus();

// Select all text in the element
                document.execCommand('selectAll', false, null);

// Make the new element draggable
                makeElementDraggable(newText);

// Apply the same editable functionality as other elements
                makeElementsEditable();
            }

// Function to make an element draggable
            function makeElementDraggable(element) {
                // Use interact.js to make the element draggable
                interact(element[0]).draggable({
                    inertia: true,
                    modifiers: [
                        interact.modifiers.restrictRect({
                            restriction: 'parent',
                            endOnly: true
                        })
                    ],
                    autoScroll: true,
                    listeners: {
                        move: dragMoveListener
                    }
                });
            }

// Drag move listener function for interact.js
            function dragMoveListener(event) {
                const target = event.target;

// Get the current position from data-x and data-y attributes or default to 0
                const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
                const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

// Update the element's position
                target.style.transform = `translate(${x}px, ${y}px)`;

// Store the position
                target.setAttribute('data-x', x);
                target.setAttribute('data-y', y);
            }

// Add the toolbar when the document is ready
            $(document).ready(function() {
                // Add the text toolbar to the editor
                addTextFloatingToolbar();

// Extend the save functionality to preserve positioning
                const originalSaveTemplate = window.saveTemplate;
                if (typeof originalSaveTemplate === 'function') {
                    window.saveTemplate = function() {
                        // Convert absolute positioned elements to use proper positioning
                        $('#canvasArea [data-draggable="true"]').each(function() {
                            const $el = $(this);
                            const x = parseFloat($el.attr('data-x')) || 0;
                            const y = parseFloat($el.attr('data-y')) || 0;

// Get computed style
                            const color = $el.css('color');
                            const fontSize = $el.css('font-size');
                            const fontFamily = $el.css('font-family');

// Remove the transform and keep position
                            $el.css({
                                'transform': 'none',
                                'left': (parseFloat($el.css('left')) + x) + 'px',
                                'top': (parseFloat($el.css('top')) + y) + 'px',
                                'color': color,
                                'font-size': fontSize,
                                'font-family': fontFamily
                            });

// Clean up data attributes
                            $el.removeAttr('data-x');
                            $el.removeAttr('data-y');
                        });

// Call the original save function
                        originalSaveTemplate();
                    };
                }
            });
        </script>
    </div>

</body>

</html>