index.php

<?php
// Include this at the top of your PHP file

// Enable error logging for debugging
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// Ensure upload directory exists
$upload_dir = "uploads/";
if (!file_exists($upload_dir)) {
    mkdir($upload_dir, 0777, true);
    // Also create .htaccess to ensure directory is accessible
    file_put_contents($upload_dir . '.htaccess', "Options +Indexes\nOrder Allow,Deny\nAllow from all");
}

// Helper function to convert a file path to base64 data URL
function getBase64Image($imagePath) {
    if (!file_exists($imagePath)) {
        error_log("Image file does not exist: " . $imagePath);
        return '';
    }
    
    // Get image content and mime type
    $imageData = file_get_contents($imagePath);
    if ($imageData === false) {
        error_log("Failed to read image data from: " . $imagePath);
        return '';
    }
    
    $finfo = finfo_open(FILEINFO_MIME_TYPE);
    $mimeType = finfo_file($finfo, $imagePath);
    finfo_close($finfo);
    
    // Convert to base64
    $base64 = base64_encode($imageData);
    return 'data:' . $mimeType . ';base64,' . $base64;
}

// Variable to store status messages and HTML preview
$message = '';
$preview_html = '';

// Process the form submission
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    error_log("Form submitted. Processing file uploads...");
    
    // Process header image
    $header_image = '';
    $header_image_data = '';
    
    if (isset($_FILES["header_image"]) && $_FILES["header_image"]["error"] == 0) {
        $target_file = $upload_dir . basename($_FILES["header_image"]["name"]);
        error_log("Processing header image: " . $target_file);
        
        // Verify it's an image
        $check = getimagesize($_FILES["header_image"]["tmp_name"]);
        if ($check !== false) {
            // Move the uploaded file
            if (move_uploaded_file($_FILES["header_image"]["tmp_name"], $target_file)) {
                error_log("Header image uploaded successfully");
                $header_image = $target_file;
                $header_image_data = getBase64Image($header_image);
            } else {
                error_log("Failed to move uploaded header image: " . error_get_last()['message']);
                $message = "Failed to save header image. Please try again.";
            }
        } else {
            error_log("File is not an image");
            $message = "The uploaded header file is not a valid image.";
        }
    } else if (isset($_FILES["header_image"])) {
        error_log("Header image upload error: " . $_FILES["header_image"]["error"]);
        switch ($_FILES["header_image"]["error"]) {
            case UPLOAD_ERR_INI_SIZE:
                $message = "The uploaded file exceeds the upload_max_filesize directive in php.ini";
                break;
            case UPLOAD_ERR_FORM_SIZE:
                $message = "The uploaded file exceeds the MAX_FILE_SIZE directive in the HTML form";
                break;
            case UPLOAD_ERR_PARTIAL:
                $message = "The uploaded file was only partially uploaded";
                break;
            case UPLOAD_ERR_NO_FILE:
                // This is common, just ignore
                break;
            case UPLOAD_ERR_NO_TMP_DIR:
                $message = "Missing a temporary folder";
                break;
            case UPLOAD_ERR_CANT_WRITE:
                $message = "Failed to write file to disk";
                break;
            case UPLOAD_ERR_EXTENSION:
                $message = "File upload stopped by extension";
                break;
            default:
                $message = "Unknown upload error";
                break;
        }
    }
    
    // Process body content
    $body_content = isset($_POST['body_content']) ? $_POST['body_content'] : '';
    
    // Get signature and layout information
    $signature_name = isset($_POST['regards_name']) ? $_POST['regards_name'] : '';
    $signature_title = isset($_POST['regards_title']) ? $_POST['regards_title'] : '';
    $regards_text = isset($_POST['regards_text']) ? $_POST['regards_text'] : 'Best Regards,';
    $layout_type = isset($_POST['layout_type']) ? $_POST['layout_type'] : '0';
    
    // Process employee/group images based on layout type
    $employee_images = [];
    $employee_details = [];
    $group_image = '';
    $group_caption = '';
    $group_image_data = '';
    
    if ($layout_type === 'group') {
        // Process group image
        if (isset($_FILES["group_image"]) && $_FILES["group_image"]["error"] == 0) {
            $target_file = $upload_dir . basename($_FILES["group_image"]["name"]);
            if (getimagesize($_FILES["group_image"]["tmp_name"]) !== false) {
                if (move_uploaded_file($_FILES["group_image"]["tmp_name"], $target_file)) {
                    $group_image = $target_file;
                    $group_image_data = getBase64Image($group_image);
                    $group_caption = isset($_POST["group_caption"]) ? $_POST["group_caption"] : '';
                    error_log("Group image uploaded successfully");
                } else {
                    error_log("Failed to move uploaded group image");
                }
            }
        }
    } else {
        // Process employee images
        for ($i = 1; isset($_FILES["employee_image_" . $i]); $i++) {
            if ($_FILES["employee_image_" . $i]["error"] == 0) {
                $target_file = $upload_dir . basename($_FILES["employee_image_" . $i]["name"]);
                if (getimagesize($_FILES["employee_image_" . $i]["tmp_name"]) !== false) {
                    if (move_uploaded_file($_FILES["employee_image_" . $i]["tmp_name"], $target_file)) {
                        $employee_images[] = getBase64Image($target_file);
                        error_log("Employee image $i uploaded successfully");
                        
                        // Add employee details
                        if (isset($_POST["employee_name_" . $i])) {
                            $employee_details[] = [
                                'name' => $_POST["employee_name_" . $i],
                                'title' => isset($_POST["employee_title_" . $i]) ? $_POST["employee_title_" . $i] : ''
                            ];
                        }
                    }
                }
            }
        }
    }
    
    // Generate the email template
    if (!empty($body_content)) {
        error_log("Generating email template...");
        
        // Use the included function to generate the email template
        $options = [
            'header_image' => $header_image_data,
            'body_content' => $body_content,
            'signature_name' => $signature_name,
            'signature_title' => $signature_title,
            'layout_type' => $layout_type,
            'regards_text' => $regards_text
        ];
        
        if ($layout_type === 'group') {
            $options['group_image'] = $group_image_data;
            $options['group_caption'] = $group_caption;
        } else {
            $options['employee_images'] = $employee_images;
            $options['employee_details'] = $employee_details;
        }
        
        // Call the generateEmailTemplate function
        // This function should be defined elsewhere in your code
        if (function_exists('generateEmailTemplate')) {
            $preview_html = generateEmailTemplate($options);
            $message = "Template generated successfully!";
            error_log("Email template generated successfully");
        } else {
            error_log("generateEmailTemplate function not found");
            $message = "Error: Template generation function not available.";
        }
    } else {
        error_log("No body content provided");
        $message = "Please provide email content.";
    }
    
    // Debug output
    error_log("Form processing complete. Status: " . $message);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Email Template Generator</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.7.0/tinymce.min.js" referrerpolicy="origin"></script>
    <style>
        :root {
            --primary-color: #4f46e5;
            --primary-hover: #4338ca;
            --secondary-color: #0ea5e9;
            --accent-color: #8b5cf6;
            --success-color: #10b981;
            --error-color: #ef4444;
            --dark: #1e293b;
            --light: #f8fafc;
            --border-radius: 0.75rem;
            --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --transition: all 0.3s ease;
        }

        * {
    font-family: 'Proxima Nova', Arial, sans-serif;
    transition: var(--transition);
}

strong, em, b, i, span, div, p, h1, h2, h3, h4, h5, h6, a, li, td, th {
    font-family: 'Proxima Nova', Arial, sans-serif;
}

        body {
            background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
            color: var(--dark);
            min-height: 100vh;
        }

        .app-header {
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            padding: 1.5rem;
            color: white;
            box-shadow: var(--box-shadow);
        }

        .main-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            max-width: 1800px;
            margin: 0 auto;
            padding: 2rem;
            min-height: calc(100vh - 80px);
        }

        .form-section {
            overflow-y: auto;
            padding-right: 1rem;
        }

        .preview-section {
            background: white;
            border-radius: var(--border-radius);
            padding: 2rem;
            overflow-y: auto;
            box-shadow: var(--box-shadow);
        }

        .card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            transition: var(--transition);
            padding: 2rem;
            margin-bottom: 1.5rem;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e2e8f0;
        }

        .card-header-icon {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            color: white;
        }

        .card-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--dark);
            margin: 0;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .input-group {
            position: relative;
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #475569;
        }

        .form-control {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid #e2e8f0;
            border-radius: 0.5rem;
            transition: var(--transition);
            font-size: 0.95rem;
            background-color: #f8fafc;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
            background-color: white;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 500;
            transition: var(--transition);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            border: none;
        }

        .btn-primary {
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            color: white;
            box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
        }

        .btn-primary:hover {
            background: linear-gradient(90deg, var(--primary-hover), var(--secondary-color));
            box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3), 0 4px 6px -2px rgba(79, 70, 229, 0.2);
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: white;
            color: var(--dark);
            border: 1px solid #e2e8f0;
        }

        .btn-secondary:hover {
            background: #f8fafc;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .btn-success {
            background: linear-gradient(90deg, var(--success-color), #059669);
            color: white;
            box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3);
        }

        .btn-success:hover {
            box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3), 0 4px 6px -2px rgba(16, 185, 129, 0.2);
            transform: translateY(-2px);
        }

        .btn-error {
            background: linear-gradient(90deg, var(--error-color), #dc2626);
            color: white;
        }

        .btn-error:hover {
            box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3);
        }

        .file-upload {
            position: relative;
        }

        .file-upload-label {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
            border: 2px dashed #bfdbfe;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
            flex-direction: column;
        }

        .file-upload-label:hover {
            background: linear-gradient(135deg, #e0f2fe, #bfdbfe);
            border-color: var(--primary-color);
        }

        .file-upload-icon {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .file-upload input[type="file"] {
            position: absolute;
            width: 0;
            height: 0;
            opacity: 0;
        }

        .selected-file {
            margin-top: 0.5rem;
            padding: 0.5rem;
            font-size: 0.9rem;
            color: #475569;
            background: #f1f5f9;
            border-radius: 0.25rem;
            display: flex;
            align-items: center;
        }

        .selected-file i {
            margin-right: 0.5rem;
            color: var(--primary-color);
        }

        .preview-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 3rem;
            background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
            border-radius: var(--border-radius);
            text-align: center;
        }

        .preview-empty i {
            font-size: 4rem;
            color: #94a3b8;
            margin-bottom: 1.5rem;
        }

        .preview-empty p:first-of-type {
            font-size: 1.5rem;
            font-weight: 600;
            color: #475569;
            margin-bottom: 0.5rem;
        }

        .preview-empty p:last-of-type {
            color: #64748b;
        }

        .toast {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            padding: 1rem 1.5rem;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            box-shadow: var(--box-shadow);
            z-index: 1000;
            max-width: 350px;
        }

        .toast i {
            margin-right: 0.75rem;
            font-size: 1.25rem;
        }

        .fade-in {
            animation: fadeIn 0.3s ease-in-out forwards;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .image-preview {
            margin-top: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .image-preview img {
            border-radius: 0.5rem;
            box-shadow: var(--box-shadow);
            max-width: 250px;
            max-height: 250px;
            object-fit: cover;
            margin-bottom: 0.75rem;
        }

        .manual-copy-instructions {
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            border-radius: var(--border-radius);
            padding: 1.5rem;
            margin-top: 1.5rem;
        }

        .manual-copy-instructions h3 {
            color: #1e40af;
            margin-bottom: 0.75rem;
        }

        .manual-copy-instructions ol {
            margin-left: 1.5rem;
        }

        .manual-copy-instructions li {
            margin-bottom: 0.5rem;
        }

        kbd {
            background: #e2e8f0;
            border-radius: 0.25rem;
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            font-family: monospace;
        }

        #formatted-content {
            border: 1px solid #e2e8f0;
            border-radius: var(--border-radius);
            padding: 1rem;
        }

        .spinner {
            width: 1.25rem;
            height: 1.25rem;
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .progress-stepper {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2rem;
        }

        .step {
            flex: 1;
            text-align: center;
            position: relative;
        }

        .step:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 1rem;
            left: 50%;
            width: 100%;
            height: 2px;
            background-color: #e2e8f0;
            z-index: 0;
        }

        .step.active:not(:last-child)::after {
            background-color: var(--primary-color);
        }

        .step-circle {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            background-color: #e2e8f0;
            color: #64748b;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 0.5rem;
            position: relative;
            z-index: 1;
        }

        .step.active .step-circle {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
        }

        .step.completed .step-circle {
            background: var(--success-color);
            color: white;
        }

        .step-title {
            font-size: 0.875rem;
            color: #64748b;
        }

        .step.active .step-title {
            color: var(--primary-color);
            font-weight: 500;
        }

        .step.completed .step-title {
            color: var(--success-color);
        }

        /* Debug styles */
        .debug-info {
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-top: 1rem;
            font-size: 0.875rem;
            color: #475569;
        }

        .debug-info h4 {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .debug-error {
            color: var(--error-color);
            font-weight: 500;
        }

        /* Media queries for responsive design */
        @media (max-width: 1280px) {
            .main-container {
                grid-template-columns: 1fr;
                height: auto;
            }

            .preview-section {
                margin-top: 2rem;
                height: 500px;
            }
        }

        @media (max-width: 768px) {
            .card-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .card-header-icon {
                margin-bottom: 1rem;
            }

            .progress-stepper {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .main-container {
                padding: 1rem;
            }

            .card {
                padding: 1.5rem;
            }

            .preview-section {
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="app-header">
        <div class="max-w-7xl mx-auto">
            <h1 class="text-3xl font-bold">Email Template Generator</h1>
            <p class="mt-2 opacity-80">Create professional, responsive email templates with ease</p>
        </div>
    </div>

    <div x-data="{ 
        isLoading: false,
        showToast: false,
        toastMessage: '',
        toastType: 'success',
        selectedFile: null,
        currentStep: 1,
        themeColor: 'indigo',
        debug: {
            showDebug: false,
            messages: []
        }
    }" class="main-container">
        <!-- Form Section -->
        <div class="form-section">
            <div class="progress-stepper mb-8">
                <div class="step" :class="{'active': currentStep >= 1, 'completed': currentStep > 1}">
                    <div class="step-circle">
                        <template x-if="currentStep > 1">
                            <i class="fas fa-check"></i>
                        </template>
                        <template x-if="currentStep <= 1">
                            <span>1</span>
                        </template>
                    </div>
                    <div class="step-title">Content</div>
                </div>
                <div class="step" :class="{'active': currentStep >= 2, 'completed': currentStep > 2}">
                    <div class="step-circle">
                        <template x-if="currentStep > 2">
                            <i class="fas fa-check"></i>
                        </template>
                        <template x-if="currentStep <= 2">
                            <span>2</span>
                        </template>
                    </div>
                    <div class="step-title">Images</div>
                </div>
                <div class="step" :class="{'active': currentStep >= 3, 'completed': currentStep > 3}">
                    <div class="step-circle">
                        <template x-if="currentStep > 3">
                            <i class="fas fa-check"></i>
                        </template>
                        <template x-if="currentStep <= 3">
                            <span>3</span>
                        </template>
                    </div>
                    <div class="step-title">Signature</div>
                </div>
                <div class="step" :class="{'active': currentStep >= 4}">
                    <div class="step-circle">
                        <template x-if="currentStep > 4">
                            <i class="fas fa-check"></i>
                        </template>
                        <template x-if="currentStep <= 4">
                            <span>4</span>
                        </template>
                    </div>
                    <div class="step-title">Generate</div>
                </div>
            </div>
            
            <!-- Important: Fixed the enctype attribute for file uploads -->
            <form method="post" enctype="multipart/form-data" @submit="isLoading = true; debug.messages.push('Form submitted')">
                <!-- Header Section -->
                <div class="card slide-up">
                    <div class="card-header">
                        <div class="card-header-icon">
                            <i class="fas fa-image"></i>
                        </div>
                        <h2 class="card-title">Header Image</h2>
                    </div>
                    <div class="file-upload">
                        <label class="file-upload-label">
                            <div class="file-upload-icon">
                                <i class="fas fa-cloud-upload-alt"></i>
                            </div>
                            <span>Drop your header image here or click to browse</span>
                            <p class="text-sm text-gray-500 mt-1">Recommended size: 750px width</p>
                            <input type="file" name="header_image" accept="image/*"
                                @change="selectedFile = $event.target.files[0]?.name; debug.messages.push('Header image selected: ' + selectedFile)">
                        </label>
                        <div x-show="selectedFile" class="selected-file mt-3">
                            <i class="fas fa-file-image"></i>
                            <span x-text="selectedFile"></span>
                        </div>
                    </div>
                </div>

                <!-- Content Section -->
                <div class="card slide-up" style="animation-delay: 0.1s">
                    <div class="card-header">
                        <div class="card-header-icon">
                            <i class="fas fa-pen-fancy"></i>
                        </div>
                        <h2 class="card-title">Email Content</h2>
                    </div>
                    <div class="form-group">
                        <textarea id="rich-text-editor" name="body_content" style="height: 300px;"><?php echo isset($_POST['body_content']) ? $_POST['body_content'] : ''; ?></textarea>
                        <p class="text-sm text-gray-500 mt-2">
                            <i class="fas fa-info-circle"></i> 
                            Important dates, titles, and key information will be automatically highlighted
                        </p>
                    </div>
                </div>

                <!-- Layout Section -->
                <div class="card slide-up" style="animation-delay: 0.2s">
                    <div class="card-header">
                        <div class="card-header-icon">
                            <i class="fas fa-th-large"></i>
                        </div>
                        <h2 class="card-title">Image Layout</h2>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                        <label class="cursor-pointer">
                            <input type="radio" name="layout_type" value="0" class="hidden" checked
                                   @change="debug.messages.push('Layout changed to: No Images')">
                            <div class="border-2 border-gray-200 hover:border-indigo-300 rounded-lg p-4 text-center transition-all" :class="{'border-indigo-500 bg-indigo-50': $el.querySelector('input').checked}">
                                <div class="bg-gray-200 h-24 rounded flex items-center justify-center mb-2">
                                    <i class="fas fa-ban text-gray-400 text-xl"></i>
                                </div>
                                <span class="text-sm font-medium">No Images</span>
                            </div>
                        </label>
                        <label class="cursor-pointer">
                            <input type="radio" name="layout_type" value="group" class="hidden"
                                   @change="debug.messages.push('Layout changed to: Group Photo')">
                            <div class="border-2 border-gray-200 hover:border-indigo-300 rounded-lg p-4 text-center transition-all" :class="{'border-indigo-500 bg-indigo-50': $el.querySelector('input').checked}">
                                <div class="bg-gray-200 h-24 rounded flex items-center justify-center mb-2">
                                    <i class="fas fa-users text-gray-400 text-xl"></i>
                                </div>
                                <span class="text-sm font-medium">Group Photo</span>
                            </div>
                        </label>
                        <label class="cursor-pointer">
                            <input type="radio" name="layout_type" value="1" class="hidden"
                                   @change="debug.messages.push('Layout changed to: Single Employee')">
                            <div class="border-2 border-gray-200 hover:border-indigo-300 rounded-lg p-4 text-center transition-all" :class="{'border-indigo-500 bg-indigo-50': $el.querySelector('input').checked}">
                                <div class="bg-gray-200 h-24 rounded flex items-center justify-center mb-2">
                                    <i class="fas fa-user text-gray-400 text-xl"></i>
                                </div>
                                <span class="text-sm font-medium">Single Employee</span>
                            </div>
                        </label>
                        <label class="cursor-pointer">
                            <input type="radio" name="layout_type" value="2" class="hidden"
                                   @change="debug.messages.push('Layout changed to: Two Employees (1x2)')">
                            <div class="border-2 border-gray-200 hover:border-indigo-300 rounded-lg p-4 text-center transition-all" :class="{'border-indigo-500 bg-indigo-50': $el.querySelector('input').checked}">
                                <div class="bg-gray-200 h-24 rounded flex items-center justify-center mb-2 grid grid-cols-2 gap-2 p-2">
                                    <div class="bg-gray-300 rounded-full w-8 h-8 mx-auto"></div>
                                    <div class="bg-gray-300 rounded-full w-8 h-8 mx-auto"></div>
                                </div>
                                <span class="text-sm font-medium">Two Employees (1x2)</span>
                            </div>
                        </label>
                        <label class="cursor-pointer">
                            <input type="radio" name="layout_type" value="3" class="hidden"
                                   @change="debug.messages.push('Layout changed to: Three Employees (1x3)')">
                            <div class="border-2 border-gray-200 hover:border-indigo-300 rounded-lg p-4 text-center transition-all" :class="{'border-indigo-500 bg-indigo-50': $el.querySelector('input').checked}">
                                <div class="bg-gray-200 h-24 rounded flex items-center justify-center mb-2 grid grid-cols-3 gap-2 p-2">
                                    <div class="bg-gray-300 rounded-full w-6 h-6 mx-auto"></div>
                                    <div class="bg-gray-300 rounded-full w-6 h-6 mx-auto"></div>
                                    <div class="bg-gray-300 rounded-full w-6 h-6 mx-auto"></div>
                                </div>
                                <span class="text-sm font-medium">Three Employees (1x3)</span>
                            </div>
                        </label>
                        <label class="cursor-pointer">
                            <input type="radio" name="layout_type" value="2-2" class="hidden"
                                   @change="debug.messages.push('Layout changed to: Four Employees (2x2)')">
                            <div class="border-2 border-gray-200 hover:border-indigo-300 rounded-lg p-4 text-center transition-all" :class="{'border-indigo-500 bg-indigo-50': $el.querySelector('input').checked}">
                                <div class="bg-gray-200 h-24 rounded flex items-center justify-center mb-2 grid grid-cols-2 grid-rows-2 gap-2 p-2">
                                    <div class="bg-gray-300 rounded-full w-6 h-6 mx-auto"></div>
                                    <div class="bg-gray-300 rounded-full w-6 h-6 mx-auto"></div>
                                    <div class="bg-gray-300 rounded-full w-6 h-6 mx-auto"></div>
                                    <div class="bg-gray-300 rounded-full w-6 h-6 mx-auto"></div>
                                </div>
                                <span class="text-sm font-medium">Four Employees (2x2)</span>
                            </div>
                        </label>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <label class="cursor-pointer">
                            <input type="radio" name="layout_type" value="3-2" class="hidden"
                                   @change="debug.messages.push('Layout changed to: Five Employees (3-2)')">
                            <div class="border-2 border-gray-200 hover:border-indigo-300 rounded-lg p-4 text-center transition-all" :class="{'border-indigo-500 bg-indigo-50': $el.querySelector('input').checked}">
                                <div class="bg-gray-200 h-24 rounded flex flex-col items-center justify-center mb-2 p-2">
                                    <div class="grid grid-cols-3 gap-2 mb-2 w-full">
                                        <div class="bg-gray-300 rounded-full w-5 h-5 mx-auto"></div>
                                        <div class="bg-gray-300 rounded-full w-5 h-5 mx-auto"></div>
                                        <div class="bg-gray-300 rounded-full w-5 h-5 mx-auto"></div>
                                    </div>
                                    <div class="grid grid-cols-2 gap-2 w-2/3">
                                        <div class="bg-gray-300 rounded-full w-5 h-5 mx-auto"></div>
                                        <div class="bg-gray-300 rounded-full w-5 h-5 mx-auto"></div>
                                    </div>
                                </div>
                                <span class="text-sm font-medium">Five Employees (3-2)</span>
                            </div>
                        </label>
                        <label class="cursor-pointer">
                            <input type="radio" name="layout_type" value="3-3" class="hidden"
                                   @change="debug.messages.push('Layout changed to: Nine Employees (3x3)')">
                            <div class="border-2 border-gray-200 hover:border-indigo-300 rounded-lg p-4 text-center transition-all" :class="{'border-indigo-500 bg-indigo-50': $el.querySelector('input').checked}">
                                <div class="bg-gray-200 h-24 rounded flex items-center justify-center mb-2 grid grid-cols-3 grid-rows-3 gap-1 p-2">
                                    <div class="bg-gray-300 rounded-full w-4 h-4 mx-auto"></div>
                                    <div class="bg-gray-300 rounded-full w-4 h-4 mx-auto"></div>
                                    <div class="bg-gray-300 rounded-full w-4 h-4 mx-auto"></div>
                                    <div class="bg-gray-300 rounded-full w-4 h-4 mx-auto"></div>
                                    <div class="bg-gray-300 rounded-full w-4 h-4 mx-auto"></div>
                                    <div class="bg-gray-300 rounded-full w-4 h-4 mx-auto"></div>
                                    <div class="bg-gray-300 rounded-full w-4 h-4 mx-auto"></div>
                                    <div class="bg-gray-300 rounded-full w-4 h-4 mx-auto"></div>
                                    <div class="bg-gray-300 rounded-full w-4 h-4 mx-auto"></div>
                                </div>
                                <span class="text-sm font-medium">Nine Employees (3x3)</span>
                            </div>
                        </label>
                    </div>

                    <div id="image-uploads" class="space-y-4 mt-6"></div>
                </div>

                <!-- Signature Section -->
                <div class="card slide-up" style="animation-delay: 0.3s">
                    <div class="card-header">
                        <div class="card-header-icon">
                            <i class="fas fa-signature"></i>
                        </div>
                        <h2 class="card-title">Email Signature</h2>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Regards Text</label>
                        <input type="text" 
                            name="regards_text" 
                            placeholder="Best Regards, Sincerely, etc." 
                            class="form-control mb-4"
                            value="<?php echo isset($_POST['regards_text']) ? htmlspecialchars($_POST['regards_text']) : 'Best Regards,'; ?>">
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="input-group">
                                <label class="form-label">Signature Name</label>
                                <input type="text" 
                                    name="regards_name" 
                                    placeholder="Your Name" 
                                    class="form-control"
                                    value="<?php echo isset($_POST['regards_name']) ? htmlspecialchars($_POST['regards_name']) : ''; ?>">
                            </div>
                            <div class="input-group">
                                <label class="form-label">Title/Position</label>
                                <input type="text" 
                                    name="regards_title" 
                                    placeholder="Your Title/Position" 
                                    class="form-control"
                                    value="<?php echo isset($_POST['regards_title']) ? htmlspecialchars($_POST['regards_title']) : ''; ?>">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex justify-between space-x-4 mt-6">
                    <button type="button" @click="debug.showDebug = !debug.showDebug" class="btn btn-secondary">
                        <i class="fas fa-bug mr-2"></i>Toggle Debug
                    </button>
                    
                    <div>
                        <button type="reset" class="btn btn-secondary">
                            <i class="fas fa-redo mr-2"></i>Reset
                        </button>
                        <button type="submit" class="btn btn-primary ml-4" :disabled="isLoading">
                            <template x-if="isLoading">
                                <div class="spinner mr-2"></div>
                            </template>
                            <i class="fas fa-paper-plane mr-2"></i>
                            Generate Template
                        </button>
                    </div>
                </div>
                
                <div x-show="debug.showDebug" class="debug-info mt-4">
                    <h4>Debug Information</h4>
                    <p>Form enctype: <strong id="form-enctype"></strong></p>
                    <p>Selected file: <strong x-text="selectedFile || 'None'"></strong></p>
                    <div>
                        <p>Debug Messages:</p>
                        <ul class="list-disc ml-5">
                            <template x-for="(message, index) in debug.messages" :key="index">
                                <li x-text="message"></li>
                            </template>
                        </ul>
                    </div>
                    
                    <?php if (isset($_FILES) && !empty($_FILES)): ?>
                    <div class="mt-2">
                        <p>Uploaded Files:</p>
                        <pre class="bg-gray-100 p-2 rounded text-xs overflow-auto"><?php print_r($_FILES); ?></pre>
                    </div>
                    <?php endif; ?>
                    
                    <?php if (isset($message) && !empty($message)): ?>
                    <div class="mt-2">
                        <p>Server Message:</p>
                        <p class="<?php echo strpos($message, 'success') !== false ? 'text-green-600' : 'debug-error'; ?>"><?php echo $message; ?></p>
                    </div>
                    <?php endif; ?>
                </div>
            </form>
        </div>

        <!-- Preview Section -->
        <div class="preview-section">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-semibold text-gray-800">Preview</h2>
                <?php if (isset($preview_html) && !empty($preview_html)): ?>
                    <div class="flex flex-wrap gap-2">
                        <button onclick="copyToClipboard()" class="btn btn-success">
                            <i class="fas fa-copy mr-2"></i>Copy with Formatting
                        </button>
                        <button onclick="copyForOutlook()" class="btn btn-primary">
                            <i class="fas fa-envelope mr-2"></i>Copy for Outlook
                        </button>
                        <button onclick="copyForGmail()" class="btn btn-info" style="background: linear-gradient(90deg, #DB4437, #4285F4); color: white;">
                            <i class="fas fa-envelope mr-2"></i>Copy for Gmail
                        </button>
                        <button onclick="copyAsCleanHtml()" class="btn btn-secondary">
                            <i class="fas fa-code mr-2"></i>Copy as HTML
                        </button>
                        <button onclick="downloadEmailTemplate()" class="btn btn-secondary">
                            <i class="fas fa-download mr-2"></i>Download
                        </button>
                        <button onclick="showManualCopyInstructions()" class="btn btn-secondary" title="What to do if copying doesn't work">
                            <i class="fas fa-question-circle"></i>
                        </button>
                    </div>
                <?php endif; ?>
            </div>

            <?php if (isset($preview_html) && !empty($preview_html)): ?>
                <div id="formatted-content">
                    <?php echo $preview_html; ?>
                </div>
            <?php else: ?>
                <div class="preview-empty">
                    <i class="fas fa-envelope-open-text"></i>
                    <p>Your email preview will appear here</p>
                    <p>Generate a template to see how your email will look</p>
                </div>
            <?php endif; ?>
            
            <!-- Manual Copy Instructions (initially hidden) -->
            <div id="manual-copy-instructions" class="hidden mt-4 p-6 bg-blue-50 border border-blue-200 rounded-lg">
    <h3 class="text-lg font-semibold text-blue-700 mb-3">Manually Copy Formatted Content</h3>
    
    <div class="mb-4">
        <h4 class="font-medium text-blue-800 mb-2">Method 1: Copy from Preview</h4>
        <ol class="list-decimal pl-5 space-y-2">
            <li>Click anywhere in the preview area above</li>
            <li>Press <kbd class="px-2 py-1 bg-gray-200 rounded text-sm">Ctrl+A</kbd> (or <kbd class="px-2 py-1 bg-gray-200 rounded text-sm">⌘+A</kbd> on Mac) to select all content</li>
            <li>Press <kbd class="px-2 py-1 bg-gray-200 rounded text-sm">Ctrl+C</kbd> (or <kbd class="px-2 py-1 bg-gray-200 rounded text-sm">⌘+C</kbd> on Mac) to copy</li>
            <li>Open your email application and paste using <kbd class="px-2 py-1 bg-gray-200 rounded text-sm">Ctrl+V</kbd> (or <kbd class="px-2 py-1 bg-gray-200 rounded text-sm">⌘+V</kbd> on Mac)</li>
        </ol>
    </div>
    
    <div class="mb-4">
        <h4 class="font-medium text-blue-800 mb-2">Method 2: For Gmail</h4>
        <ol class="list-decimal pl-5 space-y-2">
            <li>Click the "Copy for Gmail" button above</li>
            <li>Open Gmail and create a new email</li>
            <li>Right-click in the email body and select "Paste" or use <kbd class="px-2 py-1 bg-gray-200 rounded text-sm">Ctrl+V</kbd></li>
            <li>If formatting doesn't appear correctly, try using the "Paste without formatting" option first (<kbd class="px-2 py-1 bg-gray-200 rounded text-sm">Ctrl+Shift+V</kbd>), then use the "Copy as HTML" button and paste again</li>
        </ol>
    </div>
    
    <div class="mb-4">
        <h4 class="font-medium text-blue-800 mb-2">Method 3: For Microsoft Outlook</h4>
        <ol class="list-decimal pl-5 space-y-2">
            <li>Click the "Copy for Outlook" button above</li>
            <li>Open Outlook and create a new email</li>
            <li>Right-click in the email body and select "Paste" or use <kbd class="px-2 py-1 bg-gray-200 rounded text-sm">Ctrl+V</kbd></li>
            <li>If given paste options, choose "Keep Source Formatting"</li>
        </ol>
    </div>
    
    <div class="mb-4">
        <h4 class="font-medium text-blue-800 mb-2">Method 4: Download and Import</h4>
        <ol class="list-decimal pl-5 space-y-2">
            <li>Click the "Download" button to save the HTML file</li>
            <li>For Gmail, you can open the HTML file in a browser, select all content (Ctrl+A), copy (Ctrl+C), then paste into Gmail</li>
            <li>For Outlook, you can use File > Open & Export > Open from File and select the downloaded HTML file</li>
        </ol>
    </div>
    
    <div class="mt-4 p-3 bg-yellow-50 border-l-4 border-yellow-400 text-sm">
        <p class="text-yellow-800">
            <i class="fas fa-lightbulb mr-2"></i>
            <strong>Gmail Tip:</strong> Gmail has stricter rules about what HTML it accepts. If your formatting isn't preserved when pasting, try clicking the "Copy for Gmail" button which optimizes the content specifically for Gmail's requirements.
        </p>
    </div>
    
    <button onclick="document.getElementById('manual-copy-instructions').classList.add('hidden')" 
            class="mt-4 text-blue-700 hover:text-blue-900 flex items-center">
        <i class="fas fa-times mr-2"></i> Close
    </button>
</div>
        </div>

        <!-- Toast Notification -->
        <div x-show="showToast" 
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform translate-x-full"
            x-transition:enter-end="opacity-100 transform translate-x-0"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 transform translate-x-0"
            x-transition:leave-end="opacity-0 transform translate-x-full"
            class="toast"
            :class="{ 'bg-green-100': toastType === 'success', 'bg-red-100': toastType === 'error' }">
            <i class="fas" :class="{ 'fa-check-circle text-green-500': toastType === 'success', 'fa-times-circle text-red-500': toastType === 'error' }"></i>
            <span x-text="toastMessage"></span>
        </div>
    </div>

    <script>
        /**
         * Updates the image upload fields based on the selected layout type
         * @param {string} layoutType - The selected layout type
         */
        function updateImageUploadFields(layoutType) {
            const container = document.getElementById('image-uploads');
            container.innerHTML = '';

            if (layoutType === 'group') {
                // Create a group photo upload field
                const div = document.createElement('div');
                div.className = 'card p-6 fade-in';
                div.innerHTML = `
                    <div class="space-y-4">
                        <h3 class="text-lg font-semibold text-gray-800">Group Photo</h3>
                        <div class="file-upload">
                            <label class="file-upload-label">
                                <div class="file-upload-icon">
                                    <i class="fas fa-users"></i>
                                </div>
                                <span>Drop your group photo here or click to browse</span>
                                <input type="file" name="group_image" accept="image/*" required
                                    onchange="updateFileName(this)">
                            </label>
                            <div class="selected-file" style="display: none;"></div>
                        </div>
                        <div class="input-group">
                            <label class="form-label">Caption (optional)</label>
                            <input type="text" name="group_caption" placeholder="Group photo caption" class="form-control">
                        </div>
                    </div>
                `;
                container.appendChild(div);
                return;
            }

            let numImages = 0;
            switch(layoutType) {
                case '1': numImages = 1; break;
                case '2': numImages = 2; break;
                case '3': numImages = 3; break;
                case '2-2': numImages = 4; break;
                case '3-2': numImages = 5; break;
                case '3-3': numImages = 9; break;
            }

            for(let i = 1; i <= numImages; i++) {
                const div = document.createElement('div');
                div.className = 'card p-6 fade-in';
                div.style.animationDelay = `${(i-1) * 0.1}s`;
                div.innerHTML = `
                    <div class="space-y-4">
                        <h3 class="text-lg font-semibold text-gray-800">Employee ${i}</h3>
                        <div class="file-upload">
                            <label class="file-upload-label">
                                <div class="file-upload-icon">
                                    <i class="fas fa-user-circle"></i>
                                </div>
                                <span>Drop employee image here or click to browse</span>
                                <input type="file" name="employee_image_${i}" accept="image/*" required
                                    onchange="updateFileName(this)">
                            </label>
                            <div class="selected-file" style="display: none;"></div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="input-group">
                                <label class="form-label">Name</label>
                                <input type="text" name="employee_name_${i}" placeholder="Employee Name" class="form-control">
                            </div>
                            <div class="input-group">
                                <label class="form-label">Title</label>
                                <input type="text" name="employee_title_${i}" placeholder="Employee Title" class="form-control">
                            </div>
                        </div>
                    </div>
                `;
                container.appendChild(div);
            }
        }

        function updateFileName(input) {
            const fileNameDisplay = input.parentElement.nextElementSibling;
            if (input.files.length > 0) {
                fileNameDisplay.innerHTML = `<i class="fas fa-file-image"></i> ${input.files[0].name}`;
                fileNameDisplay.style.display = 'block';
                
                // Add preview
                const parentCard = input.closest('.card');
                let previewContainer = parentCard.querySelector('.image-preview');
                if (!previewContainer) {
                    previewContainer = document.createElement('div');
                    previewContainer.className = 'image-preview mt-4';
                    input.parentElement.parentElement.appendChild(previewContainer);
                }
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewContainer.innerHTML = `
                        <img src="${e.target.result}" class="rounded-lg shadow-md">
                        <button type="button" class="btn btn-error mt-2" onclick="removeImage(this)">
                            <i class="fas fa-trash-alt mr-2"></i>Remove
                        </button>
                    `;
                };
                reader.readAsDataURL(input.files[0]);
                
                // Update debug info if available
                const debug = document.querySelector('[x-data]').__x.$data.debug;
                if (debug) {
                    debug.messages.push(`File selected for ${input.name}: ${input.files[0].name}`);
                }
            } else {
                fileNameDisplay.style.display = 'none';
            }
        }

        function removeImage(button) {
            const previewContainer = button.parentElement;
            const fileUpload = previewContainer.previousElementSibling.querySelector('input[type="file"]');
            
            // Reset the file input
            fileUpload.value = '';
            
            // Remove the preview and hide the filename
            previewContainer.remove();
            
            // Hide the filename display
            const fileNameDisplay = fileUpload.parentElement.nextElementSibling;
            fileNameDisplay.style.display = 'none';
            
            // Update debug info if available
            const debug = document.querySelector('[x-data]').__x.$data.debug;
            if (debug) {
                debug.messages.push(`File removed from ${fileUpload.name}`);
            }
        }

        function showToast(message, type = 'success', duration = 3000) {
            const toast = document.querySelector('[x-data]').__x.$data;
            toast.toastMessage = message;
            toast.toastType = type;
            toast.showToast = true;
            
            setTimeout(() => {
                toast.showToast = false;
            }, duration);
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Make sure the form has the proper enctype
            const form = document.querySelector('form');
            if (form) {
                // Display form enctype in debug
                const formEnctypeElement = document.getElementById('form-enctype');
                if (formEnctypeElement) {
                    formEnctypeElement.textContent = form.getAttribute('enctype') || 'Not set';
                }
                
                // Ensure correct enctype
                if (form.getAttribute('enctype') !== 'multipart/form-data') {
                    form.setAttribute('enctype', 'multipart/form-data');
                    console.log('Added missing enctype attribute to form');
                    
                    // Update debug info
                    const debug = document.querySelector('[x-data]').__x.$data.debug;
                    if (debug) {
                        debug.messages.push('Added missing enctype="multipart/form-data" to form');
                    }
                }
            }
            
            // Add event listeners to layout type radio buttons
            document.querySelectorAll('input[name="layout_type"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    updateImageUploadFields(this.value);
                });
            });

            // Initialize the TinyMCE editor
            tinymce.init({
    selector: '#rich-text-editor',
    height: 300,
    plugins: 'code fontsize paste link image autolink lists table hr charmap preview',
    toolbar: 'undo redo | formatselect | fontsizeselect lineheight | bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist | table link image hr | code',
    menubar: false,
    statusbar: true,
    fontsize_formats: "8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 24pt 36pt",
    lineheight_formats: "1 1.2 1.5 2.0 2.5 3.0",
    content_style: `
        body { 
            font-family: 'Proxima Nova', Arial, sans-serif !important; 
        } 
        p, div, h1, h2, h3, h4, h5, h6, td, li { 
            font-family: 'Proxima Nova', Arial, sans-serif !important;
            line-height: inherit !important;
        }
        .line-height-1 { line-height: 1 !important; }
        .line-height-1-2 { line-height: 1.2 !important; }
        .line-height-1-5 { line-height: 1.5 !important; }
        .line-height-2 { line-height: 2 !important; }
        .line-height-2-5 { line-height: 2.5 !important; }
        .line-height-3 { line-height: 3 !important; }
    `,
    setup: function(editor) {
        // Create a custom line height dropdown
        editor.ui.registry.addMenuButton('lineheight', {
            icon: 'line-height',
            tooltip: 'Line Height',
            fetch: function(callback) {
                const items = [
                    {
                        type: 'menuitem',
                        text: '1.0',
                        onAction: function() {
                            applyLineHeight(editor, '1.0');
                        }
                    },
                    {
                        type: 'menuitem',
                        text: '1.2',
                        onAction: function() {
                            applyLineHeight(editor, '1.2');
                        }
                    },
                    {
                        type: 'menuitem',
                        text: '1.5',
                        onAction: function() {
                            applyLineHeight(editor, '1.5');
                        }
                    },
                    {
                        type: 'menuitem',
                        text: '2.0',
                        onAction: function() {
                            applyLineHeight(editor, '2.0');
                        }
                    },
                    {
                        type: 'menuitem',
                        text: '2.5',
                        onAction: function() {
                            applyLineHeight(editor, '2.5');
                        }
                    },
                    {
                        type: 'menuitem',
                        text: '3.0',
                        onAction: function() {
                            applyLineHeight(editor, '3.0');
                        }
                    }
                ];
                callback(items);
            }
        });
        
        // Function to apply line height with Outlook compatibility
        function applyLineHeight(editor, value) {
            editor.execCommand('LineHeight', false, value);
            
            // Add Outlook-specific attributes
            const node = editor.selection.getNode();
            const ptValue = parseFloat(value) * 16;
            
            editor.dom.setAttribs(node, {
                'style': `line-height: ${value} !important; mso-line-height-rule: exactly; mso-line-height-alt: ${ptValue}pt;` + 
                         editor.dom.getAttrib(node, 'style'),
                'class': `line-height-${value.replace('.', '-')} ` + editor.dom.getAttrib(node, 'class')
            });
            
            // If it's a paragraph, also add MsoNormal class for Outlook
            if (node.nodeName === 'P') {
                editor.dom.addClass(node, 'MsoNormal');
            }
        }
        
        // Add alignment buttons if they're not already available
        if (!editor.ui.registry.getAll().buttons.alignleft) {
            editor.ui.registry.addButton('alignleft', {
                icon: 'align-left',
                tooltip: 'Align Left',
                onAction: function() {
                    editor.execCommand('JustifyLeft');
                }
            });
            
            editor.ui.registry.addButton('aligncenter', {
                icon: 'align-center',
                tooltip: 'Align Center',
                onAction: function() {
                    editor.execCommand('JustifyCenter');
                }
            });
            
            editor.ui.registry.addButton('alignright', {
                icon: 'align-right',
                tooltip: 'Align Right',
                onAction: function() {
                    editor.execCommand('JustifyRight');
                }
            });
        }
        
        // Add font size adjustment buttons
        editor.ui.registry.addMenuButton('fontsizeselect', {
            icon: 'resize',
            tooltip: 'Font Size',
            fetch: function(callback) {
                const fontSizes = [
                    {text: '8pt', size: '8pt'},
                    {text: '9pt', size: '9pt'},
                    {text: '10pt', size: '10pt'},
                    {text: '11pt', size: '11pt'},
                    {text: '12pt', size: '12pt'},
                    {text: '14pt', size: '14pt'},
                    {text: '16pt', size: '16pt'},
                    {text: '18pt', size: '18pt'},
                    {text: '24pt', size: '24pt'},
                    {text: '36pt', size: '36pt'}
                ];
                
                const items = fontSizes.map(function(item) {
                    return {
                        type: 'menuitem',
                        text: item.text,
                        onAction: function() {
                            editor.execCommand('FontSize', false, item.size);
                        }
                    };
                });
                
                callback(items);
            }
        });
        
        // Apply default formatting on init
        editor.on('init', function() {
            editor.getBody().style.fontFamily = "'Proxima Nova', Arial, sans-serif";
            setTimeout(function() {
                editor.execCommand('FontSize', false, '12pt');
                applyLineHeight(editor, '1.5');
            }, 500);
        });
    }
});

            // Initialize any existing layout
            if (document.querySelector('input[name="layout_type"]:checked')) {
                updateImageUploadFields(document.querySelector('input[name="layout_type"]:checked').value);
            }
            
            // Debug info
            console.log('DOM fully loaded');
            const debug = document.querySelector('[x-data]').__x.$data.debug;
            if (debug) {
                debug.messages.push('DOM fully loaded and ready');
            }
            
            // Add special handling for file inputs to ensure proper file data transmission
            document.querySelectorAll('input[type="file"]').forEach(input => {
                input.addEventListener('change', function() {
                    // Log file selection
                    console.log(`File selected for ${this.name}:`, this.files[0] ? this.files[0].name : 'None');
                    
                    // Special handling for header image
                    if (this.name === 'header_image') {
                        const headerImage = this.files[0];
                        if (headerImage) {
                            // Update debug info
                            if (debug) {
                                debug.messages.push(`Header image selected: ${headerImage.name} (${headerImage.size} bytes)`);
                            }
                            
                            // Update the visual display
                            updateFileName(this);
                        }
                    }
                });
            });
        });
        
        // Functions for copying and downloading the template
        function copyToClipboard() {
    const content = document.getElementById('formatted-content');
    if (!content) {
        showToast('Nothing to copy', 'error');
        return;
    }
    
    // Try multiple clipboard methods for best compatibility
    copyWithFormattingPreserved(content)
        .then(result => {
            if (result.success) {
                showToast(result.message, 'success');
            } else {
                showManualCopyInstructions();
            }
        })
        .catch(error => {
            console.error('Copy failed:', error);
            showManualCopyInstructions();
        });
}

/**
 * Attempt to copy with formatting preserved using multiple methods
 * @param {HTMLElement} element - The element to copy
 * @return {Promise<{success: boolean, message: string}>} - Result of the copy operation
 */
async function copyWithFormattingPreserved(element) {
    // Method 1: Try Clipboard API with HTML format
    if (navigator.clipboard && typeof navigator.clipboard.write === 'function') {
        try {
            // Create ClipboardItem with both HTML and text formats
            const htmlBlob = new Blob([element.outerHTML], { type: 'text/html' });
            const textBlob = new Blob([element.innerText], { type: 'text/plain' });
            
            const clipboardItem = new ClipboardItem({
                'text/html': htmlBlob,
                'text/plain': textBlob
            });
            
            await navigator.clipboard.write([clipboardItem]);
            return { success: true, message: 'Content copied with formatting preserved!' };
        } catch (err) {
            console.warn('Clipboard API write failed, trying alternative method', err);
        }
    }
    
    // Method 2: Create a frame with document.execCommand
    try {
        // Create invisible iframe
        const iframe = document.createElement('iframe');
        iframe.style.position = 'fixed';
        iframe.style.top = '-9999px';
        iframe.style.left = '-9999px';
        iframe.style.width = '100px';
        iframe.style.height = '100px';
        iframe.setAttribute('tabindex', '-1');
        document.body.appendChild(iframe);
        
        // Write content to iframe
        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        iframeDoc.open();
        iframeDoc.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <style>
                    body, p, div, span, table, td, strong, em, h1, h2, h3, h4, h5, h6, a, li, blockquote {
                        font-family: "Proxima Nova", Arial, sans-serif !important;
                        line-height: 1.5 !important;
                    }
                    * {
                        font-family: "Proxima Nova", Arial, sans-serif !important;
                    }
                </style>
            </head>
            <body>${element.outerHTML}</body>
            </html>
        `);
        iframeDoc.close();
        
        // Focus and select all content
        iframe.contentWindow.focus();
        iframeDoc.execCommand('selectAll', false, null);
        
        // Copy the selection
        const success = iframeDoc.execCommand('copy');
        
        // Clean up
        document.body.removeChild(iframe);
        
        if (success) {
            return { success: true, message: 'Content copied with formatting preserved!' };
        }
    } catch (err) {
        console.warn('iframe method failed', err);
    }
    
    // Method 3: Create a selection in the current document
    try {
        // Clone the node to avoid modifying the original
        const clone = element.cloneNode(true);
        
        // Create a div to hold the cloned content
        const container = document.createElement('div');
        container.style.position = 'fixed';
        container.style.left = '-9999px';
        container.style.top = '0';
        container.appendChild(clone);
        document.body.appendChild(container);
        
        // Create a selection range
        const range = document.createRange();
        range.selectNodeContents(container);
        
        // Apply the selection
        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        
        // Attempt the copy
        const success = document.execCommand('copy');
        
        // Clean up
        selection.removeAllRanges();
        document.body.removeChild(container);
        
        if (success) {
            return { success: true, message: 'Content copied with formatting preserved!' };
        }
    } catch (err) {
        console.warn('Selection method failed', err);
    }
    
    // Method 4: Try creating a temporary contentEditable element
    try {
        const tempDiv = document.createElement('div');
        tempDiv.contentEditable = 'true';
        tempDiv.style.position = 'fixed';
        tempDiv.style.left = '-9999px';
        tempDiv.style.top = '0';
        tempDiv.innerHTML = element.outerHTML;
        document.body.appendChild(tempDiv);
        
        // Select the content
        const range = document.createRange();
        range.selectNodeContents(tempDiv);
        
        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        
        // Copy
        const success = document.execCommand('copy');
        
        // Clean up
        selection.removeAllRanges();
        document.body.removeChild(tempDiv);
        
        if (success) {
            return { success: true, message: 'Content copied with formatting!' };
        }
    } catch (err) {
        console.warn('ContentEditable method failed', err);
    }
    
    // If all methods fail, fallback to plain text
    try {
        const text = element.innerText || element.textContent;
        const textArea = document.createElement('textarea');
        textArea.value = text;
        textArea.style.position = 'fixed';
        textArea.style.left = '-9999px';
        textArea.style.top = '0';
        document.body.appendChild(textArea);
        
        textArea.select();
        const success = document.execCommand('copy');
        document.body.removeChild(textArea);
        
        if (success) {
            return { success: true, message: 'Content copied as plain text (formatting not preserved)' };
        }
    } catch (err) {
        console.warn('Plain text fallback failed', err);
    }
    
    return { success: false, message: 'Unable to copy content' };
}
        
        function downloadEmailTemplate() {
            const content = document.getElementById('formatted-content');
            if (!content) {
                showToast('Nothing to download', 'error');
                return;
            }
            
            // Create a complete HTML document
            const htmlDocument = `<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Email Template</title>
</head>
<body>
    ${content.outerHTML}
</body>
</html>`;
            
            // Create blob and download link
            const blob = new Blob([htmlDocument], { type: 'text/html' });
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = 'email-template.html';
            
            // Trigger download
            document.body.appendChild(a);
            a.click();
            
            // Clean up
            setTimeout(() => {
                document.body.removeChild(a);
                URL.revokeObjectURL(a.href);
            }, 100);
            
            showToast('Email template downloaded successfully', 'success');
        }
        
        function showManualCopyInstructions() {
    const instructions = document.getElementById('manual-copy-instructions');
    if (instructions) {
        instructions.classList.remove('hidden');
    }
    
    // Highlight the content area to make it more obvious
    const content = document.getElementById('formatted-content');
    if (content) {
        const originalBorder = content.style.border;
        const originalBackground = content.style.background;
        
        content.style.border = '2px dashed #4f46e5';
        content.style.background = 'rgba(79, 70, 229, 0.05)';
        content.style.padding = '10px';
        
        // Temporarily make the content selectable if it wasn't already
        const originalUserSelect = content.style.userSelect;
        content.style.userSelect = 'all';
        content.style.webkitUserSelect = 'all';
        content.style.msUserSelect = 'all';
        
        // Reset after 5 seconds
        setTimeout(() => {
            content.style.border = originalBorder;
            content.style.background = originalBackground;
            content.style.userSelect = originalUserSelect;
            content.style.webkitUserSelect = originalUserSelect;
            content.style.msUserSelect = originalUserSelect;
        }, 5000);
    }
}

function copyForOutlook() {
    const content = document.getElementById('formatted-content');
    if (!content) {
        showToast('Nothing to copy', 'error');
        return;
    }
    
    // Create a special Outlook-optimized version
    const outlookElement = document.createElement('div');
    
    // Clone content and process all elements to enforce font and line spacing
    const contentClone = content.cloneNode(true);
    
    // First - find all paragraphs and add a spacing system for Outlook
    const paragraphs = contentClone.querySelectorAll('p');
    paragraphs.forEach((p, index) => {
        // First extract any line-height value from the paragraph
        const style = p.getAttribute('style') || '';
        let lineHeightMatch = style.match(/line-height\s*:\s*([^;!]+)(!important)?/i);
        let lineHeightValue = lineHeightMatch ? parseFloat(lineHeightMatch[1]) : 1.5;
        
        // Set a consistent Outlook-compatible style
        let newStyles = [];
        
        // Preserve non-line-height styles
        style.split(';').forEach(rule => {
            const trimmedRule = rule.trim();
            if (trimmedRule && !trimmedRule.includes('line-height')) {
                newStyles.push(trimmedRule);
            }
        });
        
        // Add Outlook-specific styling - critical for proper line spacing
        newStyles.push(`font-family:"Proxima Nova RG", "Proxima Nova", Arial, sans-serif !important`);
        newStyles.push(`line-height:${lineHeightValue} !important`);
        newStyles.push(`mso-line-height-rule:exactly`);
        newStyles.push(`mso-line-height-alt:${lineHeightValue * 16}pt`);
        
        // Setup margins for consistent spacing - required for Outlook
        newStyles.push('margin-top:0');
        newStyles.push('margin-bottom:12pt');
        
        p.setAttribute('style', newStyles.join(';') + ';');
        
        // Add Outlook-specific class
        let className = p.getAttribute('class') || '';
        if (lineHeightValue <= 1.2) {
            className += ' line-height-10 MsoNormal';
        } else if (lineHeightValue <= 1.8) {
            className += ' line-height-15 MsoNormal';
        } else {
            className += ' line-height-20 MsoNormal';
        }
        p.setAttribute('class', className.trim());
    });
    
    // Second - add special spacing divs between paragraphs for Outlook
    const contentBox = contentClone.querySelector('td.mceContentBody, td.outlook-content-cell');
    if (contentBox) {
        // Create a wrapper to hold the new content with spacers
        const wrapper = document.createElement('div');
        const children = Array.from(contentBox.childNodes);
        
        children.forEach(child => {
            // Append the original element
            wrapper.appendChild(child.cloneNode(true));
            
            // Add spacing divs between block elements
            if (child.nodeType === 1 && ['p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'table'].includes(child.tagName.toLowerCase())) {
                const spacer = document.createElement('div');
                spacer.className = 'spacer-10'; 
                spacer.innerHTML = '&nbsp;';
                spacer.style.lineHeight = '10px';
                spacer.style.fontSize = '10px';
                spacer.style.msoLineHeightRule = 'exactly';
                wrapper.appendChild(spacer);
            }
        });
        
        // Replace content box contents
        contentBox.innerHTML = '';
        Array.from(wrapper.childNodes).forEach(node => {
            contentBox.appendChild(node);
        });
    }
    
    // Process all remaining elements to enforce Proxima Nova font and line spacing
    const allElements = contentClone.querySelectorAll('*');
    allElements.forEach(el => {
        if (el.nodeType !== 1) return; // Skip non-element nodes
        
        // Get existing style
        let style = el.getAttribute('style') || '';
        
        // Replace existing font-family to avoid conflicts
        style = style.replace(/font-family\s*:[^;]+;/gi, '');
        style += ';font-family:"Proxima Nova RG", "Proxima Nova", Arial, sans-serif !important;';
        
        // Special handling for text elements that aren't paragraphs
        if (['div', 'span', 'strong', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'td', 'th', 'a', 'li'].includes(el.tagName.toLowerCase()) && el.tagName.toLowerCase() !== 'p') {
            // Check if element has line-height
            const lineHeightMatch = style.match(/line-height\s*:\s*([^;!]+)(!important)?/i);
            if (lineHeightMatch) {
                const lineHeightValue = parseFloat(lineHeightMatch[1]);
                
                // Convert to pt for Outlook if it's a number
                const ptValue = lineHeightValue * 16;
                
                // Remove existing line-height
                style = style.replace(/line-height\s*:[^;]+;/gi, '');
                
                // Add with MSO properties
                style += `;line-height:${lineHeightValue} !important;`;
                style += `;mso-line-height-rule:exactly;mso-line-height-alt:${ptValue}pt;`;
            }
        }
        
        el.setAttribute('style', style);
    });
    
    // Create a complete document with Outlook conditional comments
    outlookElement.innerHTML = `
        <!DOCTYPE html>
        <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="ProgId" content="Word.Document">
            <meta name="Generator" content="Microsoft Word 15">
            <meta name="Originator" content="Microsoft Word 15">
            <title>Email Content</title>
            <!--[if mso]>
            <style>
            /* Outlook-specific font and line spacing rules */
            body, table, td, a { 
                font-family:"Proxima Nova RG", "Proxima Nova", Arial, sans-serif !important;
            }
            p, h1, h2, h3, h4, h5, h6, strong, em, span, div { 
                font-family:"Proxima Nova RG", "Proxima Nova", Arial, sans-serif !important;
                mso-line-height-rule: exactly;
            }
            /* Outlook needs explicit line heights and margins on paragraphs */
            p {
                margin-top:0pt !important;
                margin-bottom:12pt !important; 
                mso-margin-top-alt:0pt !important;
                mso-margin-bottom-alt:12pt !important;
            }
            /* MsoNormal style is critical for Outlook */
            p.MsoNormal, li.MsoNormal, div.MsoNormal {
                margin:0pt;
                margin-bottom:12pt;
                line-height:115%;
                font-size:11.0pt;
                font-family:"Proxima Nova",sans-serif;
                mso-fareast-language:EN-US;
            }
            /* Handle specific line heights from TinyMCE */
            .line-height-10 { line-height:1.0 !important; mso-line-height-rule:exactly; mso-line-height-alt:16pt; }
            .line-height-15 { line-height:1.5 !important; mso-line-height-rule:exactly; mso-line-height-alt:24pt; }
            .line-height-20 { line-height:2.0 !important; mso-line-height-rule:exactly; mso-line-height-alt:32pt; }
            
            /* Spacing helper classes */
            .spacer-10 { line-height:10pt !important; font-size:10pt !important; mso-line-height-rule:exactly; }
            
            /* Table spacing control */
            table { mso-table-lspace:0pt; mso-table-rspace:0pt; }
            </style>
            <xml>
            <o:OfficeDocumentSettings>
                <o:AllowPNG/>
                <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
            </xml>
            <![endif]-->
            <style>
                body { margin: 0; padding: 0; font-family: "Proxima Nova", Arial, sans-serif; }
                p { margin-top: 0; margin-bottom: 12pt; }
                .spacer-10 { line-height: 10px; font-size: 10px; }
            </style>
        </head>
        <body style="margin:0;padding:0;font-family:'Proxima Nova RG', 'Proxima Nova', Arial, sans-serif;">
            <!--[if mso]>
            <table width="750" cellspacing="0" cellpadding="0" border="0" align="center">
            <tr><td style="font-family:'Proxima Nova RG', 'Proxima Nova', Arial, sans-serif !important;mso-line-height-rule:exactly;">
            <![endif]-->
            ${contentClone.outerHTML}
            <!--[if mso]>
            </td></tr>
            </table>
            <![endif]-->
        </body>
        </html>
    `;
    
    // Try to copy with strong formatting
    copyWithFormattingPreserved(outlookElement)
        .then(result => {
            if (result.success) {
                showToast('Content copied with enhanced line spacing for Outlook!', 'success');
            } else {
                // Try an alternative method specifically for Outlook
                const success = copyWithOutlookFormat(outlookElement);
                if (success) {
                    showToast('Content copied with special Outlook formatting!', 'success');
                } else {
                    showManualCopyInstructions();
                }
            }
        })
        .catch(error => {
            console.error('Outlook-specific copy failed:', error);
            showManualCopyInstructions();
        });
}

function copyWithOutlookFormat(element) {
    try {
        // Create a temporary iframe for Outlook-friendly copying
        const iframe = document.createElement('iframe');
        iframe.style.position = 'fixed';
        iframe.style.top = '-9999px';
        iframe.style.left = '-9999px';
        iframe.width = '750px';
        iframe.height = '500px';
        document.body.appendChild(iframe);
        
        // Use Word's preferred HTML structure with explicit namespace declarations
        const doc = iframe.contentDocument || iframe.contentWindow.document;
        doc.open();
        doc.write(`
            <html xmlns:o="urn:schemas-microsoft-com:office:office"
                  xmlns:w="urn:schemas-microsoft-com:office:word"
                  xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
                  xmlns="http://www.w3.org/TR/REC-html40">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <meta name="ProgId" content="Word.Document">
                <meta name="Generator" content="Microsoft Word 15">
                <meta name="Originator" content="Microsoft Word 15">
                <!--[if mso]>
                <style>
                /* These styles are critical for Outlook */
                p.MsoNormal, li.MsoNormal, div.MsoNormal {
                    margin:0;
                    margin-bottom:12.0pt;
                    line-height:115%;
                    font-size:11.0pt;
                    font-family:"Proxima Nova",sans-serif;
                    mso-fareast-language:EN-US;
                }
                p { margin:0; margin-bottom:12.0pt; line-height:115%; }
                span.paragraph { line-height:115%; }
                .spacer-10 { mso-line-height-rule:exactly; line-height:10.0pt; font-size:10.0pt; }
                .line-height-10 { line-height:1.0; mso-line-height-rule:exactly; }
                .line-height-15 { line-height:1.5; mso-line-height-rule:exactly; }
                .line-height-20 { line-height:2.0; mso-line-height-rule:exactly; }
                </style>
                <![endif]-->
            </head>
            <body lang="EN-US" style="tab-interval:.5in">
                ${element.innerHTML}
            </body>
            </html>
        `);
        doc.close();
        
        // Select content inside the iframe
        const range = doc.createRange();
        range.selectNodeContents(doc.body);
        
        const selection = iframe.contentWindow.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        
        // Copy using this special iframe
        const success = doc.execCommand('copy');
        
        // Clean up
        document.body.removeChild(iframe);
        
        return success;
    } catch (error) {
        console.error('Outlook special format copying failed:', error);
        return false;
    }
}

function copyForGmail() {
    const content = document.getElementById('formatted-content');
    if (!content) {
        showToast('Nothing to copy', 'error');
        return;
    }
    
    // Clone the content
    const gmailClone = content.cloneNode(true);
    
    // Find the header image
    const headerImg = gmailClone.querySelector('img[width="750"], img[style*="width:750px"]');
    
    if (headerImg) {
        // Create a new wrapper for the header image
        const headerWrapper = document.createElement('div');
        headerWrapper.innerHTML = `
            <table width="750" border="0" cellpadding="0" cellspacing="0" align="center" style="width:750px; max-width:100%; table-layout:fixed;">
                <tr>
                    <td align="center" style="padding:0;">
                        <img src="${headerImg.src}" alt="Header" width="950" style="width:750px; max-width:100%; display:block; border:0;" />
                    </td>
                </tr>
            </table>
        `;
        
        // Replace the header image with our new wrapper
        const headerParent = headerImg.parentNode;
        if (headerParent) {
            // If the parent is already a td, replace its content
            if (headerParent.tagName === 'TD') {
                headerParent.innerHTML = headerWrapper.innerHTML;
            } else {
                // Otherwise replace the image with our wrapper
                headerParent.replaceChild(headerWrapper.firstElementChild, headerImg);
            }
        }
    }
    
    // Also ensure the footer has the correct width
    const footerTd = gmailClone.querySelector('tr:last-child td');
    if (footerTd) {
        footerTd.setAttribute('width', '750');
        footerTd.style.width = '750px';
        footerTd.style.maxWidth = '100%';
    }
    
    // Create a proper wrapper for Gmail
    const wrapper = document.createElement('div');
    wrapper.innerHTML = `
        <!DOCTYPE html>
        <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style type="text/css">
                body { margin: 0; padding: 0; }
                table { border-collapse: collapse; width: 750px !important; max-width: 100% !important; }
                img { max-width: 100% !important; }
                .header-img { width: 750px !important; max-width: 100% !important; }
                .footer-td { width: 750px !important; max-width: 100% !important; }
            </style>
        </head>
        <body>
            ${gmailClone.outerHTML}
        </body>
        </html>
    `;
    
    // Use the modified content for copying
    copyWithFormattingPreserved(wrapper)
        .then(result => {
            if (result.success) {
                showToast('Content copied for Gmail with matched widths!', 'success');
            } else {
                showManualCopyInstructions();
            }
        })
        .catch(error => {
            console.error('Gmail copy failed:', error);
            showManualCopyInstructions();
        });
}

function fallbackGmailCopy(content) {
    try {
        // Create a text area with the HTML
        const textarea = document.createElement('textarea');
        textarea.value = content.outerHTML;
        textarea.style.position = 'fixed';
        textarea.style.left = '-9999px';
        textarea.style.top = '0';
        document.body.appendChild(textarea);
        
        // Select and copy
        textarea.focus();
        textarea.select();
        
        const success = document.execCommand('copy');
        document.body.removeChild(textarea);
        
        if (success) {
            showToast('Email content copied! Choose "Paste with formatting" in Gmail', 'success');
        } else {
            showManualCopyInstructions();
        }
    } catch (err) {
        console.error('Gmail copy fallback failed:', err);
        showManualCopyInstructions();
    }
}

function prepareElementForGmail(element) {
    // Fix the overall table structure to ensure consistent width
    
    // First, look for the main container table
    const mainTable = element.querySelector('table[width="750"]');
    if (mainTable) {
        // Ensure it has max-width for responsiveness
        mainTable.setAttribute('style', 'width:750px;max-width:100%;border-collapse:collapse;border-spacing:0;margin:0 auto;padding:0;');
        
        // Make sure all direct td children have align="center" for consistent Gmail rendering
        const directTds = mainTable.querySelectorAll('> tbody > tr > td');
        directTds.forEach(td => {
            if (!td.hasAttribute('align')) {
                td.setAttribute('align', 'center');
            }
        });
    }
    
    // For each image, especially header images, ensure proper structure
    const images = element.querySelectorAll('img');
    images.forEach(img => {
        // Add display:block and other Gmail-friendly attributes
        let style = img.getAttribute('style') || '';
        if (!style.includes('display:block')) {
            style += 'display:block;';
        }
        if (!style.includes('max-width:100%')) {
            style += 'max-width:100%;';
        }
        if (!style.includes('margin:0 auto')) {
            style += 'margin:0 auto;';
        }
        img.setAttribute('style', style);
        
        // Ensure it has width attributes
        if (!img.hasAttribute('width') && img.style.width) {
            const width = parseInt(img.style.width);
            if (!isNaN(width)) {
                img.setAttribute('width', width);
            }
        }
    });
    
    // Gmail handles tables better with explicit cellpadding, cellspacing and border
    const tables = element.querySelectorAll('table');
    tables.forEach(table => {
        if (!table.hasAttribute('cellpadding')) table.setAttribute('cellpadding', '0');
        if (!table.hasAttribute('cellspacing')) table.setAttribute('cellspacing', '0');
        if (!table.hasAttribute('border')) table.setAttribute('border', '0');
        
        // Add role="presentation" for Gmail
        table.setAttribute('role', 'presentation');
    });
    
    // Ensure text content has proper styling for Gmail
    const textElements = element.querySelectorAll('p, div, span, h1, h2, h3, h4, h5, h6, strong, em, b, i, td, th, li, a');
textElements.forEach(el => {
    let style = el.getAttribute('style') || '';
    if (!style.includes('font-family')) {
        style += 'font-family:"Proxima Nova", Arial, sans-serif !important;';
    } else {
        style = style.replace(/font-family\s*:\s*[^;]+;/i, 'font-family:"Proxima Nova", Arial, sans-serif !important;');
    }
    el.setAttribute('style', style);
});
    
    // Add special Gmail wrapper with proper meta tags
    const wrapper = document.createElement('div');
    wrapper.innerHTML = `
        <!DOCTYPE html>
        <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                body { margin:0; padding:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
                img { -ms-interpolation-mode:bicubic; }
                table { border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; }
            </style>
        </head>
        <body>
            ${element.innerHTML}
        </body>
        </html>
    `;
    
    // Replace the element's content with the wrapper
    element.innerHTML = wrapper.innerHTML;
}

function copyAsCleanHtml() {
    const content = document.getElementById('formatted-content');
    if (!content) {
        showToast('Nothing to copy', 'error');
        return;
    }
    
    // Clone the content
    const cleanHtmlContainer = document.createElement('div');
    cleanHtmlContainer.innerHTML = content.innerHTML;
    
    // Create a blob with just the HTML
    const htmlBlob = new Blob([cleanHtmlContainer.innerHTML], { type: 'text/html' });
    
    // Try to use modern clipboard API first
    if (navigator.clipboard && navigator.clipboard.write) {
        try {
            const clipboardItem = new ClipboardItem({
                'text/html': htmlBlob
            });
            
            navigator.clipboard.write([clipboardItem])
                .then(() => {
                    showToast('HTML content copied for email! Paste with Ctrl+V', 'success');
                })
                .catch(err => {
                    fallbackCopyHtml(cleanHtmlContainer);
                });
        } catch (err) {
            fallbackCopyHtml(cleanHtmlContainer);
        }
    } else {
        fallbackCopyHtml(cleanHtmlContainer);
    }
}

/**
 * Fallback method for clean HTML copy
 */
function fallbackCopyHtml(container) {
    try {
        // Create a selection range
        const range = document.createRange();
        range.selectNodeContents(container);
        
        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        
        // Copy
        const success = document.execCommand('copy');
        selection.removeAllRanges();
        
        if (success) {
            showToast('HTML content copied! Paste in your email client', 'success');
        } else {
            showManualCopyInstructions();
        }
    } catch (err) {
        console.error('Clean HTML copy failed:', err);
        showManualCopyInstructions();
    }
}
    </script>
    
    <!-- Additional script to ensure proper file uploads -->
    <script>
        // Helper function to check file upload capabilities
        function checkFileUploadSupport() {
            // Check if FormData is supported
            if (window.FormData === undefined) {
                console.error('FormData is not supported in this browser');
                return false;
            }
            
            // Check if FileReader is supported
            if (window.FileReader === undefined) {
                console.error('FileReader is not supported in this browser');
                return false;
            }
            
            return true;
        }
        
        // Initialize on page load
        window.addEventListener('load', function() {
            // Check file upload support
            const hasSupport = checkFileUploadSupport();
            console.log('File upload support:', hasSupport);
            
            // Verify form enctype again
            const form = document.querySelector('form');
            if (form) {
                // Force the correct enctype for the form
                form.setAttribute('enctype', 'multipart/form-data');
                
                // Add an extra validation step before submission
                form.addEventListener('submit', function(e) {
                    const debug = document.querySelector('[x-data]').__x.$data.debug;
                    if (debug) {
                        debug.messages.push('Form submission started');
                    }
                    
                    // Verify enctype again just to be safe
                    if (this.getAttribute('enctype') !== 'multipart/form-data') {
                        e.preventDefault();
                        this.setAttribute('enctype', 'multipart/form-data');
                        if (debug) {
                            debug.messages.push('Fixed missing enctype before submission');
                        }
                        
                        // Re-submit the form after fixing
                        setTimeout(() => this.submit(), 100);
                    }
                });
            }
        });
    </script>

<?php
/**
 * Generate a complete email template with all components
 * Using consistent width across header, body, and footer
 * 
 * @param array $options Configuration options for the template
 * @return string Complete HTML for the email template
 */
function generateEmailTemplate($options) {
    // Set default values
    $defaults = [
        'header_image' => '',
        'body_content' => '',
        'signature_name' => '',
        'signature_title' => '',
        'employee_images' => [],
        'layout_type' => '0',
        'footer_image' => '',
        'employee_details' => [],
        'group_image' => '',
        'group_caption' => '',
        'regards_text' => 'Best Regards,'
    ];
    
    // Merge provided options with defaults
    $options = array_merge($defaults, $options);
    
    // Extract variables for easier use
    extract($options);
    
    // Set font family - Use both "Proxima Nova RG" and "Proxima Nova" for better compatibility
    $fontFamily = '"Proxima Nova RG", "Proxima Nova", Arial, sans-serif';
    
    // Process the body content for better email compatibility
    $body_content = processContentForOutlook($body_content);
    
    // Start building the template with consistent structure for header, body, and footer
    $template = '<!DOCTYPE html>
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Email Template</title>

<!--[if mso]>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<style type="text/css">
    /* Outlook-specific styling */
    body, table, td, p, a, li, blockquote {
        font-family: ' . $fontFamily . ' !important;
        mso-line-height-rule: exactly;
    }
    p, div, span, strong, em, h1, h2, h3, h4, h5, h6 {
        mso-line-height-rule: exactly;
        font-family: ' . $fontFamily . ' !important;
    }
    
    p {
        mso-margin-top-alt: 0;
        mso-margin-bottom-alt: 12.0pt;
        margin-top: 0;
        margin-bottom: 12.0pt;
    }
    
    /* Precise line height classes for Outlook */
    .line-height-10 { line-height:1.0 !important; mso-line-height-rule:exactly; mso-line-height-alt:16.0pt; margin-top:0; margin-bottom:12.0pt; }
    .line-height-15 { line-height:1.5 !important; mso-line-height-rule:exactly; mso-line-height-alt:24.0pt; margin-top:0; margin-bottom:12.0pt; }
    .line-height-20 { line-height:2.0 !important; mso-line-height-rule:exactly; mso-line-height-alt:32.0pt; margin-top:0; margin-bottom:12.0pt; }
    
    /* Additional spacer solution for Outlook */
    .spacer-5 { mso-line-height-rule:exactly; line-height:5.0pt; font-size:5.0pt; }
    .spacer-10 { mso-line-height-rule:exactly; line-height:10.0pt; font-size:10.0pt; }
    .spacer-15 { mso-line-height-rule:exactly; line-height:15.0pt; font-size:15.0pt; }
    .spacer-20 { mso-line-height-rule:exactly; line-height:20.0pt; font-size:20.0pt; }
    
    /* Special fix for Outlook line spacing issues */
    p.MsoNormal, li.MsoNormal, div.MsoNormal {
        margin: 0;
        margin-bottom: 12.0pt;
        line-height: 115%;
        font-size: 11.0pt;
        font-family: ' . $fontFamily . ';
    }
    
    table {
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
    }
</style>
<![endif]-->

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        font-family: ' . $fontFamily . ' !important;
    }
    
    table, td {
        border-collapse: collapse;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
        font-family: ' . $fontFamily . ' !important;
    }
    
    img {
        -ms-interpolation-mode: bicubic;
        border: 0;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
    }
    
    p, div, span, strong, em, h1, h2, h3, h4, h5, h6, a, li {
        font-family: ' . $fontFamily . ' !important;
    }
    
    /* Better line spacing preservation */
    [style*="line-height"] {
        line-height: inherit !important;
    }
    
    /* Default paragraph styling if not specified in the editor */
    p {
        margin-top: 0;
        margin-bottom: 12pt;
        line-height: 1.5;
    }
    
    /* Line height classes */
    .line-height-10 { line-height:1.0 !important; }
    .line-height-15 { line-height:1.5 !important; }
    .line-height-20 { line-height:2.0 !important; }
    
    /* Spacer classes */
    .spacer-5 { line-height:5px; font-size:5px; }
    .spacer-10 { line-height:10px; font-size:10px; }
    .spacer-15 { line-height:15px; font-size:15px; }
    .spacer-20 { line-height:20px; font-size:20px; }
</style>
</head>
<body style="margin:0;padding:0;background-color:#ffffff;font-family:' . $fontFamily . ' !important;">
<!--[if mso]>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" width="750" style="width:750px;">
<tr>
<td>
<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" width="750" style="width:750px;max-width:100%;border-collapse:collapse;border-spacing:0;margin:0 auto;padding:0;font-family:' . $fontFamily . ' !important;">
    <!-- HEADER SECTION -->
    <tr>
        <td align="center" style="padding:0;font-family:' . $fontFamily . ' !important;">
            ' . ($header_image ? '
            <img src="' . $header_image . '" alt="Header" width="750" style="width:750px;max-width:100%;display:block;border:0;margin:0 auto;" />'
            : '') . '
        </td>
    </tr>
    
    <!-- BODY CONTENT SECTION -->
    <tr>
        <td class="outlook-content-cell" align="center" style="padding:30px 50px;font-family:' . $fontFamily . ' !important;">
            <div style="width:100%;font-family:' . $fontFamily . ' !important;line-height:1.5 !important;mso-line-height-rule:exactly;mso-line-height-alt:24pt;">
                ' . $body_content . '
            </div>
        </td>
    </tr>';

    // Add employee images or group image based on layout type
    if ($layout_type === 'group' && !empty($group_image)) {
        $template .= generateGroupImage($group_image, $group_caption, $fontFamily);
    } else if (!empty($employee_images)) {
        $template .= generateImageGrid($employee_images, $layout_type, $employee_details, $fontFamily);
    }

    // Add signature section
    $template .= '
    <!-- OUTLOOK SPACING FIX - BEFORE SIGNATURE -->
    <tr>
        <td height="-5" style="font-size:-5px;line-height:-5px;mso-line-height-rule:exactly;">&nbsp;</td>
    </tr>
    
    <tr>
        <td align="left" style="padding:10px 50px 10px 50px;font-family:' . $fontFamily . ' !important;">
            <p style="margin:0 0 12pt 0;padding:0;line-height:1.5 !important;mso-line-height-rule:exactly;mso-line-height-alt:24pt;color:#333333;font-family:' . $fontFamily . ' !important;">
                <strong style="font-weight:bold;font-family:' . $fontFamily . ' !important;">' . htmlspecialchars($regards_text) . '</strong>
            </p>
            <p style="margin:0 0 12pt 0;padding:0;line-height:1.5 !important;mso-line-height-rule:exactly;mso-line-height-alt:24pt;color:#333333;font-family:' . $fontFamily . ' !important;">
                <strong style="font-weight:bold;font-family:' . $fontFamily . ' !important;">' . htmlspecialchars($signature_name) . '</strong><br>
                <span style="color:#666666;font-weight:bold;font-family:' . $fontFamily . ' !important;">' . htmlspecialchars($signature_title) . '</span>
            </p>
        </td>
    </tr>
    
    <!-- OUTLOOK SPACING FIX - BEFORE FOOTER -->
    <tr>
        <td height="5" style="font-size:5px;line-height:5px;mso-line-height-rule:exactly;">&nbsp;</td>
    </tr>
    
    <!-- FOOTER SECTION -->
    <tr>
        <td align="center" style="background-color:#000000;padding:15px;font-family:' . $fontFamily . ' !important;">
            <div style="font-family:' . $fontFamily . ' !important;line-height:1.5 !important;mso-line-height-rule:exactly;mso-line-height-alt:24pt;color:#FFFFFF;text-align:center;">
                <span style="color:#FFFFFF;font-family:' . $fontFamily . ' !important;">
                    VDart, 11180 State Bridge Road, Suite 302, Alpharetta, Georgia GA 30022,<br>
                    United States. Toll Free: (800) 371 1664
                </span>
            </div>
        </td>
    </tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>';

    return $template;
}

/**
 * Generate HTML for a group image section
 */
function generateGroupImage($group_image, $group_caption, $fontFamily = null) {
    if (empty($group_image)) {
        return '';
    }
    
    // Set font family if not provided
    if ($fontFamily === null) {
        $fontFamily = '"Proxima Nova RG", "Proxima Nova", Arial, sans-serif';
    }
    
    $html = '<tr><td align="center" style="padding:20px 0;font-family:' . $fontFamily . ' !important;">';
    $html .= '<div style="text-align:center; max-width:650px; margin:0 auto;font-family:' . $fontFamily . ' !important;">';
    // Make the group photo wider than individual photos
    $html .= '<img src="' . $group_image . '" width="600" style="width:100%; max-width:600px; display:block; border:0; margin:0 auto; border-radius:5px;" />';
    
    if (!empty($group_caption)) {
        $html .= '<div style="padding-top:15px; font-family:' . $fontFamily . ' !important;">';
        
        // Add MSO conditional comment for Outlook
        $html .= '<!--[if mso]><font face="' . $fontFamily . '"><![endif]-->';
        
        $html .= '<span style="font-style:italic; font-size:14px; font-family:' . $fontFamily . ' !important;">' . 
                 htmlspecialchars($group_caption) . '</span>';
                 
        $html .= '<!--[if mso]></font><![endif]-->';
        
        $html .= '</div>';
    }
    
    $html .= '</div>';
    $html .= '</td></tr>';
    
    return $html;
}

/**
 * Generate HTML for an employee image grid
 */
function generateImageGrid($images, $layout_type, $employee_details = [], $fontFamily = null) {
    // Set font family if not provided
    if ($fontFamily === null) {
        $fontFamily = '"Proxima Nova RG", "Proxima Nova", Arial, sans-serif';
    }
    
    $html = '<tr><td><table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="width:100%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; font-family:' . $fontFamily . ' !important;">';
    
    $generateEmployeeCell = function($index, $cellWidth = 200) use ($images, $employee_details, $fontFamily) {
        if (!isset($images[$index])) {
            return '';
        }
        
        $imageData = $images[$index];
        
        $html = '<td align="center" style="padding:10px; width:' . $cellWidth . 'px; font-family:' . $fontFamily . ' !important;">';
        $html .= '<div style="text-align:center; font-family:' . $fontFamily . ' !important;">';
        $html .= '<img src="' . $imageData . '" width="200" height="200" style="display:block; border:0; margin:0 auto; border-radius:5px;" />';
        $html .= '<div style="height:15px; line-height:15px; font-size:15px;">&nbsp;</div>';
        
        if (isset($employee_details[$index]) && !empty($employee_details[$index]['name'])) {
            $html .= '<div style="padding-top:15px; font-family:' . $fontFamily . ' !important;">';
            $html .= '<span style="font-weight:bold; font-size:16px; font-family:' . $fontFamily . ' !important;">' . 
                     htmlspecialchars($employee_details[$index]['name']) . '</span><br>';
                     
            // Always include a font tag for Outlook compatibility
            $html .= '<!--[if mso]><font face="' . $fontFamily . '"><![endif]-->';
            $html .= '<span style="font-size:14px; font-family:' . $fontFamily . ' !important;">' . 
                     htmlspecialchars($employee_details[$index]['title']) . '</span>';
            $html .= '<!--[if mso]></font><![endif]-->';
            
            $html .= '</div>';
        }
        $html .= '</div>';
        $html .= '</td>';
        
        return $html;
    };

    switch($layout_type) {
        case '1': // Single image
            if (!empty($images)) {
                $html .= '<tr><td align="center"><table cellpadding="0" cellspacing="0" border="0"><tr>';
                $html .= $generateEmployeeCell(0, 200);
                $html .= '</tr></table></td></tr>';
            }
            break;

        case '2': // Two images (1x2)
            if (count($images) >= 2) {
                $html .= '<tr><td align="center"><table cellpadding="0" cellspacing="0" border="0"><tr>';
                for($i = 0; $i < 2; $i++) {
                    $html .= $generateEmployeeCell($i, 200);
                }
                $html .= '</tr></table></td></tr>';
            }
            break;

        case '3': // Three images (1x3)
            if (count($images) >= 3) {
                $html .= '<tr><td align="center"><table cellpadding="0" cellspacing="0" border="0"><tr>';
                for($i = 0; $i < 3; $i++) {
                    $html .= $generateEmployeeCell($i, 200);
                }
                $html .= '</tr></table></td></tr>';
            }
            break;

        case '2-2': // Four images (2x2)
            if (count($images) >= 4) {
                for($row = 0; $row < 2; $row++) {
                    $html .= '<tr><td align="center"><table cellpadding="0" cellspacing="0" border="0"><tr>';
                    for($col = 0; $col < 2; $col++) {
                        $index = $row * 2 + $col;
                        $html .= $generateEmployeeCell($index, 200);
                    }
                    $html .= '</tr></table></td></tr>';
                }
            }
            break;

        case '3-2': // Five images (3-2)
            if (count($images) >= 5) {
                // First row with 3 images
                $html .= '<tr><td align="center"><table cellpadding="0" cellspacing="0" border="0"><tr>';
                for($i = 0; $i < 3; $i++) {
                    $html .= $generateEmployeeCell($i, 200);
                }
                $html .= '</tr></table></td></tr>';
                
                // Second row with 2 images (centered)
                $html .= '<tr><td align="center"><table cellpadding="0" cellspacing="0" border="0"><tr>';
                $html .= '<td width="100" style="font-family:' . $fontFamily . ' !important;">&nbsp;</td>'; // Spacer for centering
                for($i = 3; $i < 5; $i++) {
                    $html .= $generateEmployeeCell($i, 200);
                }
                $html .= '<td width="100" style="font-family:' . $fontFamily . ' !important;">&nbsp;</td>'; // Spacer for centering
                $html .= '</tr></table></td></tr>';
            }
            break;

        case '3-3': // Nine images (3x3)
            if (count($images) >= 9) {
                for($row = 0; $row < 3; $row++) {
                    $html .= '<tr><td align="center"><table cellpadding="0" cellspacing="0" border="0"><tr>';
                    for($col = 0; $col < 3; $col++) {
                        $index = $row * 3 + $col;
                        $html .= $generateEmployeeCell($index, 200);
                    }
                    $html .= '</tr></table></td></tr>';
                }
            }
            break;

        default: // No images
            break;
    }
    
    $html .= '</table></td></tr>';
    
    return $html;
}

/**
 * Process HTML content for Outlook compatibility
 */
function processContentForOutlook($html) {
    // If the HTML is empty, return
    if (empty($html)) {
        return '';
    }
    
    // Set font family to ensure both Proxima Nova RG and regular Proxima Nova are included
    $fontFamily = '"Proxima Nova RG", "Proxima Nova", Arial, sans-serif';
    
    // Create a DOMDocument to process the HTML
    $dom = new DOMDocument();
    $dom->preserveWhiteSpace = true;
    
    // Load HTML with error suppression
    libxml_use_internal_errors(true); 
    @$dom->loadHTML('<?xml encoding="utf-8" ?>' . $html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
    libxml_clear_errors();
    
    // Create a DOMXPath object to query the document
    $xpath = new DOMXPath($dom);
    
    // Process ALL elements to ensure font and spacing is consistently applied
    $allElements = $xpath->query('//*');
    if ($allElements) {
        foreach ($allElements as $element) {
            $style = $element->getAttribute('style');
            $tagName = strtolower($element->nodeName);
            
            // Parse existing style attributes
            $styles = array();
            if (!empty($style)) {
                // Split the style attribute by semicolons
                $styleAttrs = explode(';', $style);
                foreach ($styleAttrs as $attr) {
                    $attr = trim($attr);
                    if (empty($attr)) continue;
                    
                    // Split each style declaration into property and value
                    $parts = explode(':', $attr, 2);
                    if (count($parts) == 2) {
                        $property = trim(strtolower($parts[0]));
                        $value = trim($parts[1]);
                        $styles[$property] = $value;
                    }
                }
            }
            
            // Always ensure font-family is set
            $styles['font-family'] = $fontFamily . ' !important';
            
            // Check for line-height style and make it properly compatible with Outlook
            $hasLineHeight = isset($styles['line-height']);
            $lineHeightValue = $hasLineHeight ? preg_replace('/\s*!important\s*/', '', $styles['line-height']) : null;
            
            // For common text elements, ensure proper line height handling
            if (in_array($tagName, ['p', 'div', 'span', 'strong', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'td', 'th', 'a', 'li'])) {
                // Only add default line height if none is specified
                if (!$hasLineHeight) {
                    $styles['line-height'] = '1.5 !important';
                    $lineHeightValue = '1.5';
                } else {
                    // Make sure the line-height is preserved with !important
                    $lineHeight = $lineHeightValue;
                    $styles['line-height'] = $lineHeight . ' !important';
                }
                
                // Add MSO rule for Outlook
                $styles['mso-line-height-rule'] = 'exactly';
                
                // Convert unitless line height to pt for Outlook compatibility
                // This is critical for Outlook to interpret line heights correctly
                if (is_numeric($lineHeightValue) || preg_match('/^[0-9.]+$/', $lineHeightValue)) {
                    $numericValue = floatval($lineHeightValue);
                    $ptValue = $numericValue * 16; // Use 16pt as base font size for better results
                    $styles['mso-line-height-alt'] = $ptValue . 'pt';
                }
                
                // Add margin control for paragraphs for better spacing
                if ($tagName == 'p') {
                    if (!isset($styles['margin-top'])) {
                        $styles['margin-top'] = '0';
                    }
                    if (!isset($styles['margin-bottom'])) {
                        $styles['margin-bottom'] = '12pt';
                    }
                }
            }
            
            // Outlook-specific class for paragraphs to help with Line Spacing
            if ($tagName == 'p') {
                // Add a class for paragraphs with specific line heights
                if ($hasLineHeight) {
                    $currentClass = $element->getAttribute('class') ?? '';
                    $lineHeightClasses = [];
                    
                    // Remove any existing line-height classes
                    $existingClasses = explode(' ', $currentClass);
                    foreach ($existingClasses as $class) {
                        if (strpos($class, 'line-height-') !== 0) {
                            $lineHeightClasses[] = $class;
                        }
                    }
                    
                    // Add appropriate line height class based on value
                    $numericValue = floatval($lineHeightValue);
                    if ($numericValue <= 1.2) {
                        $lineHeightClasses[] = 'line-height-10';
                    } else if ($numericValue <= 1.8) {
                        $lineHeightClasses[] = 'line-height-15';
                    } else {
                        $lineHeightClasses[] = 'line-height-20';
                    }
                    
                    // Add MsoNormal class for Outlook
                    $lineHeightClasses[] = 'MsoNormal';
                    
                    $element->setAttribute('class', implode(' ', $lineHeightClasses));
                }
            }
            
            // Rebuild the style attribute
            $newStyle = '';
            foreach ($styles as $property => $value) {
                $newStyle .= $property . ': ' . $value . '; ';
            }
            
            // Set the modified style back
            $element->setAttribute('style', trim($newStyle));
            
            // If the element is a <font> tag, explicitly set the face attribute as well
            if ($tagName === 'font') {
                $element->setAttribute('face', $fontFamily);
            }
        }
    }
    
    // Get the processed HTML content
    $html = $dom->saveHTML();
    
    // Remove the XML declaration
    $html = preg_replace('/<\?xml encoding="utf-8" \?>/i', '', $html);
    
    // Remove unnecessary HTML, head, body tags if they were added by DOMDocument
    $html = preg_replace('/<\/?html[^>]*>/i', '', $html);
    $html = preg_replace('/<\/?head[^>]*>/i', '', $html);
    $html = preg_replace('/<\/?body[^>]*>/i', '', $html);
    
    return $html;
}

/**
 * Format announcement content by highlighting important phrases
 */
function formatAnnouncementContent($content) {
    // Common important phrases to bold
    $importantPhrases = [
        // Dates and Time-related
        '/\b(today|tomorrow|yesterday)\b/i',
        '/\b(\d{1,2}(?:st|nd|rd|th)?\s+(?:January|February|March|April|May|June|July|August|September|October|November|December))\b/i',
        '/\b(Monday|Tuesday|Wednesday|Thursday|Friday|Saturday|Sunday)\b/i',
        
        // Event keywords
        '/\b(meeting|webinar|conference|seminar|workshop|training)\b/i',
        '/\b(announcement|attention|notice|reminder|update|alert)\b/i',
        
        // Action items
        '/\b(deadline|due date|required|mandatory|important|urgent|asap|action required)\b/i',
        '/\b(please note|key points|highlights)\b/i',
        
        // Time
        '/\b(\d{1,2}:\d{2}(?:\s*[AaPp][Mm])?)\b/',
        
        // Numbers with context
        '/\b(Phase [0-9]+)\b/i',
        '/\b(Step [0-9]+)\b/i'
    ];
    
    // Additional context-based patterns
    $contextPatterns = [
        // Time periods
        '/\b(\d+[:]\\d+\\s*(?:AM|PM|am|pm))\b/',
        // Dates in various formats
        '/\b(\\d{1,2}[-\/]\\d{1,2}[-\/]\\d{2,4})\b/',
        // Percentages
        '/\b(\\d+(?:\\.\\d+)?%)\b/',
        // Currency
        '/\b(\\$\\d+(?:,\\d{3})*(?:\\.\\d{2})?)\b/',
        // Email addresses
        '/\b([A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,})\b/'
    ];
    
    // Combine all patterns
    $allPatterns = array_merge($importantPhrases, $contextPatterns);
    
    // Apply bold formatting to matches
    foreach ($allPatterns as $pattern) {
        $content = preg_replace($pattern, '<strong>$1</strong>', $content);
    }
    
    // Handle special cases - CAPITALIZE and bold certain keywords
    $emphasisKeywords = [
        'IMPORTANT',
        'URGENT',
        'REMINDER',
        'NOTE',
        'WARNING',
        'ALERT',
        'ACTION REQUIRED',
        'DEADLINE'
    ];
    
    foreach ($emphasisKeywords as $keyword) {
        $pattern = '/\b' . preg_quote($keyword, '/') . '\b/i';
        $content = preg_replace($pattern, '<strong>' . strtoupper($keyword) . '</strong>', $content);
    }
    
    // Preserve existing styles
    $content = preg_replace_callback('/<([a-z]+)([^>]*?)style="([^"]*?)"([^>]*?)>/i', function($matches) {
        // Keep the style attribute intact
        return '<' . $matches[1] . $matches[2] . 'style="' . $matches[3] . '"' . $matches[4] . '>';
    }, $content);

    return $content;
}

?>

<script>
window.addEventListener('load', function() {
    if (typeof tinymce === 'undefined') {
        console.error('TinyMCE failed to load');
        alert('Editor failed to load. Please check your internet connection.');
    } else {
        console.log('TinyMCE loaded successfully');
    }
});
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
    // Get the formatted content container
    const previewContainer = document.getElementById('formatted-content');
    
    if (previewContainer) {
        // Add a click handler to make the container selectable
        previewContainer.addEventListener('click', function(e) {
            // Set a data attribute to mark this container as "active" for selection
            this.setAttribute('data-active-container', 'true');
        });
        
        // Add a blur handler to remove the "active" marker when clicking outside
        document.addEventListener('click', function(e) {
            if (!previewContainer.contains(e.target)) {
                previewContainer.removeAttribute('data-active-container');
            }
        });
        
        // Intercept Ctrl+A keypress
        document.addEventListener('keydown', function(e) {
            // Check if Ctrl+A was pressed (or Command+A on Mac)
            if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
                // Check if our preview container is active
                if (previewContainer.getAttribute('data-active-container') === 'true') {
                    e.preventDefault(); // Prevent default Ctrl+A behavior
                    
                    // Create a selection range for just the preview content
                    const range = document.createRange();
                    range.selectNodeContents(previewContainer);
                    
                    const selection = window.getSelection();
                    selection.removeAllRanges();
                    selection.addRange(range);
                }
            }
        });
        
        // Add visual indicator for better user experience
        previewContainer.addEventListener('mouseenter', function() {
            // Add a subtle outline when hovering over the preview
            if (!this.style.outline) {
                this.style.transition = 'outline 0.2s ease-in-out';
                this.style.outline = '1px dashed rgba(79, 70, 229, 0.3)';
            }
        });
        
        previewContainer.addEventListener('mouseleave', function() {
            // Remove outline when not hovering
            if (!this.getAttribute('data-active-container')) {
                this.style.outline = 'none';
            }
        });
        
        // Make the behavior clearer with a tooltip
        previewContainer.setAttribute('title', 'Click inside and press Ctrl+A to select all content');
    }
    
    // Also fix the manual copy instructions to be clearer
    const instructionsElement = document.getElementById('manual-copy-instructions');
    if (instructionsElement) {
        const instructions = instructionsElement.querySelector('ol li:first-child');
        if (instructions) {
            instructions.innerHTML = 'Click inside the preview area above (it will show a subtle outline when active)';
        }
    }
});
</script>