<?php
if (session_status() === PHP_SESSION_NONE) {
    ini_set('session.gc_maxlifetime', 31536000);
    ini_set('session.cookie_lifetime', 31536000);
    session_start();
}

require_once 'db.php';


// ✅ Ensure User is Logged In
if (!isset($_SESSION['logged_in_user'])) {
    header("Location: user-login.php");
    exit;
}

$loggedInUser = $_SESSION['logged_in_user'];
$page_id = $_GET['id'] ?? null;
if (!$page_id) {
    die("Error: Page ID is missing.");
}

// ✅ Fetch Logo from Branding Table
$brandingQuery = $pdo->prepare("SELECT * FROM branding LIMIT 1");
$brandingQuery->execute();
$brandingData = $brandingQuery->fetch(PDO::FETCH_ASSOC);
$logoImage = $brandingData['logo_image'] ?? null;


// ✅ Fetch User's Numeric ID
$userQuery = $pdo->prepare("SELECT id FROM users WHERE user_id = ?");
$userQuery->execute([$loggedInUser]);
$userData = $userQuery->fetch(PDO::FETCH_ASSOC);

if (!$userData) {
    header("Location: user-login.php");
    exit;
}

$user_id = $userData['id']; 

// ✅ Fetch Lead Capture Page Details
$stmt = $pdo->prepare("SELECT * FROM lead_capture_pages WHERE id = ? AND user_id = ?");
$stmt->execute([$page_id, $user_id]);
$page = $stmt->fetch(PDO::FETCH_ASSOC);
$savedColor = $page['color_theme'] ?? 'blue'; // Default to 'blue' if empty
$font_headline = $page['font_headline'] ?? 'Anton';
$font_subheading = $page['font_subheading'] ?? 'Pacifico';



if (!$page) {
    die("Error: Lead capture page not found.");
}

// ✅ Handle Form Submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $headline = trim($_POST['headline']);
    $allowedTags = '<p><br><b><i><u><strong><em><span><div><ul><li><ol><a><img><h1><h2><h3><h4><h5><h6><center><blockquote><small><hr><pre><code><style><mark><strike><sup><sub><table><thead><tbody><tr><td><th>';
$subheadline = strip_tags($_POST['subheadline'], $allowedTags);
    $background = $_POST['background'];
    $mockup_filename = isset($_POST['remove_mockup']) ? null : ($_POST['mockup_filename'] ?? null);
    $color_theme = $_POST['color_theme'];

 
$font_headline = $_POST['font_headline'] ?? $page['font_headline'];
$font_subheading = $_POST['font_subheading'] ?? $page['font_subheading'];

$cta_text = trim($_POST['cta_text'] ?? '');



// ✅ Define the mapping of colors to thumbnails
$colorToThumbnail = [
    "blue" => "1.png",
    "green" => "2.png",
    "orange" => "3.png",
    "purple" => "4.png",
    "red" => "5.png",
    "teal" => "6.png",
    "yellow" => "7.png",
    "pink" => "8.png",
    "gray" => "9.png"
];

// ✅ Determine if color was changed
$thumbnailPath = $page['thumbnail']; // Default: Keep existing thumbnail
if ($color_theme !== $page['color_theme']) {
    // If color changed, update the thumbnail accordingly
    $thumbnailFile = $colorToThumbnail[$color_theme] ?? "default.png"; 
    $thumbnailPath = "assets/thumbnails/" . $thumbnailFile;
}

// ✅ Update only necessary fields
$updateStmt = $pdo->prepare("UPDATE lead_capture_pages 
    SET headline = ?, subheadline = ?, background = ?, mockup_filename = ?, color_theme = ?, font_headline = ?, font_subheading = ?, thumbnail = ?, cta_text = ?
    WHERE id = ? AND user_id = ?");
$updateStmt->execute([
    $headline,
    $subheadline,
    $background,
    $mockup_filename,
    $color_theme,
    $font_headline,
    $font_subheading,
    $thumbnailPath,
    $cta_text,
    $page_id,
    $user_id
]);



    header("Location: lead-capture.php?updated=1");
    exit;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Lead Capture Page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="assets/css/nav-style.css">
    
    <!-- Trumbowyg Editor CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trumbowyg@2.25.1/dist/ui/trumbowyg.min.css">

<!-- jQuery (required) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- Trumbowyg Editor JS -->
<script src="https://cdn.jsdelivr.net/npm/trumbowyg@2.25.1/dist/trumbowyg.min.js"></script>

<!-- ✅ Add this color plugin for text & background color support -->
<script src="https://cdn.jsdelivr.net/npm/trumbowyg@2.25.1/dist/plugins/colors/trumbowyg.colors.min.js"></script>

<!-- Trumbowyg Emoji Plugin -->
<script src="https://cdn.jsdelivr.net/npm/trumbowyg@2.25.1/dist/plugins/emoji/trumbowyg.emoji.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trumbowyg@2.25.1/dist/plugins/emoji/ui/trumbowyg.emoji.min.css">

            <style>
    
    body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container-fluid {
    flex-grow: 1;
}


    /* Ensure the sidebar stays fixed properly */
    .sidebar {
        width: 250px !important;
        min-height: 100vh;
        background-color: #f8f9fa;
    }

    /* Fix the main content so it doesn't shrink */
    .container-fluid {
        flex-grow: 1 !important;
        padding: 20px !important;
    }

    /* Ensure widgets and buttons stay aligned */
    .card {
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }

    /* Fix footer width */
    footer {
        width: 100% !important;
    }
    
    /* Floating Copy Notification */
.copy-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #28a745; /* Green (Success) */
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    display: none; /* Initially hidden */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: opacity 0.5s ease-in-out;
}

.copy-notification.show {
    display: block;
    opacity: 1;
}

.copy-notification i {
    margin-right: 8px;
}

/* Footer */
.footer {
    background-color: #343a40; /* Dark background */
    color: #ffffff; /* White text */
    text-align: center;
    padding: 15px;
    font-size: 14px;
    width: 100%;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    position: relative; /* Ensures it stays below content */
    margin-top: 20px; /* Adds space above the footer */
}

.rounded-circle {
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ddd;
    transition: 0.3s;
}
.rounded-circle:hover {
    border-color: #007bff;
}


    select.form-control {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        appearance: auto !important;
        -webkit-appearance: auto;
        -moz-appearance: auto;
        font-size: 16px;
        padding: 8px;
    }

.color-selection {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.color-option {
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.color-option input {
    display: none;
}

.color-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
    border: 3px solid transparent;
    transition: all 0.3s ease-in-out;
}

.color-option input:checked + .color-circle {
    border-color: #000;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.color-option:hover .color-circle {
    transform: scale(1.1);
}


.insert-snippet {
    font-size: 14px;
    padding: 12px;
    background: #fff;
    transition: all 0.3s ease;
    border-radius: 8px;
}
.insert-snippet:hover {
    background: #f0f8ff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.editor-mockup-img {
  max-width: 90%;
  height: auto;
  display: block;
  margin: 10px auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

</style>
</head>
<body>

<?php include 'top-navbar.php'; ?>

<?php include 'sidebar.php'; ?>
<!-- Sidebar Toggle Button (Mobile Only) -->
<button onclick="toggleSidebar()" class="sidebar-toggle-btn">
    <i class="fas fa-bars"></i>
</button>

<!-- Overlay for sidebar on mobile -->
    <div class="sidebar-overlay" onclick="toggleSidebar()"></div>
    <!-- ✅ Main Content -->
    <div class="container-fluid p-4" style="background: #fff; min-height: 100vh;">
        <h2>Edit Lead Capture Page<?php include 'google-translate-widget.php'; ?>
</h2>
        
        <form method="POST">
            <div class="mb-3">
                <label class="form-label">Headline</label>
                <input type="text" name="headline" class="form-control" value="<?= htmlspecialchars($page['headline']); ?>" required>
            </div>

<div class="mb-3">
    <label class="form-label">Subheadline (You can use bold, italics, underline, colors, etc.)</label><BR>
    
    <!-- 🔘 Insert Snippet Button -->
<button type="button" class="btn btn-outline-secondary mb-2" data-bs-toggle="modal" data-bs-target="#snippetModal">
    💡 Insert From Snippet Library
</button>




    
    

    <textarea name="subheadline" class="form-control" id="subheadline-editor"><?php echo htmlspecialchars_decode($page['subheadline'] ?? ($_POST['subheadline'] ?? '')); ?></textarea>
    <small class="form-text text-muted">Use the toolbar to format text. Only simple HTML like <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code>, <code>&lt;u&gt;</code>, and color are supported.</small>
</div>





<h3>Select a Font Set</h3>
<div class="font-selection d-flex flex-wrap gap-3">
    <?php
    // Define font sets with their Google Fonts
    $fontSets = [
        1 => ['file' => 'Anton-Pacifico-set.png', 'headline' => 'Anton', 'subheading' => 'Pacifico'],
        2 => ['file' => 'Bebas-Neue-Dancing-Script-set.png', 'headline' => 'Bebas Neue', 'subheading' => 'Dancing Script'],
        3 => ['file' => 'Montserrat-Raleway-set.png', 'headline' => 'Montserrat', 'subheading' => 'Raleway'],
        4 => ['file' => 'Oswald-Lobster-set.png', 'headline' => 'Oswald', 'subheading' => 'Lobster'],
        5 => ['file' => 'Lato-Courgette-set.png', 'headline' => 'Lato', 'subheading' => 'Courgette'],
        6 => ['file' => 'Poppins-Roboto-set.png', 'headline' => 'Poppins', 'subheading' => 'Roboto'],
        7 => ['file' => 'Abril-Nunito-set.png', 'headline' => 'Abril Fatface', 'subheading' => 'Nunito'],
        8 => ['file' => 'Bangers-WorkSans-set.png', 'headline' => 'Bangers', 'subheading' => 'Work Sans'],
    ];

    foreach ($fontSets as $id => $set) {
        // Pre-select the saved font set from the database
        $checked = ($page['font_headline'] === $set['headline'] && $page['font_subheading'] === $set['subheading']) ? 'checked' : '';

        echo '
        <label class="font-option text-center">
            <input type="radio" name="font_set" value="'.$id.'" class="d-none" data-headline="'.$set['headline'].'" data-subheading="'.$set['subheading'].'" '.$checked.'>
            <img src="assets/font-set-thumbs/'.$set['file'].'" alt="Font Set '.$id.'" class="font-thumbnail">
        </label>';
    }
    ?>
</div>

<!-- ✅ Hidden Inputs to Store Font Names -->
<input type="hidden" name="font_headline" id="font_headline" value="<?= htmlspecialchars($page['font_headline']); ?>">
<input type="hidden" name="font_subheading" id="font_subheading" value="<?= htmlspecialchars($page['font_subheading']); ?>">

<script>
    document.querySelectorAll('input[name="font_set"]').forEach(input => {
        input.addEventListener('change', function() {
            document.getElementById('font_headline').value = this.dataset.headline;
            document.getElementById('font_subheading').value = this.dataset.subheading;
        });
    });
</script>

<style>
    .font-selection {
        display: flex;
        gap: 15px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .font-option {
        cursor: pointer;
        border: 2px solid transparent;
        padding: 5px;
        border-radius: 10px;
        transition: all 0.3s ease-in-out;
    }
    .font-option img {
        width: 150px; /* Adjust size as needed */
        height: auto;
        border-radius: 5px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }
    .font-option:hover {
        border: 2px solid #007bff;
    }
    input[type="radio"]:checked + img {
        border: 3px solid #007bff;
    }
</style>



<!-- ✅ Background Selection -->
<div class="mb-3">
    <label class="form-label">Choose a Background</label>
    <div class="background-selection d-flex flex-wrap gap-3">
        <?php
        $backgroundDir = 'assets/backgrounds/';
        $backgroundsToShow = [];
        $allFiles = glob($backgroundDir . '*.jpg');
        $safeUserId = preg_replace('/[^a-zA-Z0-9_\-]/', '', $loggedInUser);
        $userPrefix = $safeUserId . '_';

        foreach ($allFiles as $filePath) {
            $filename = basename($filePath);
            if (strpos($filename, 'bg') === 0 || strpos($filename, $userPrefix) === 0) {
                $backgroundsToShow[] = $filename;
            }
        }

        foreach ($backgroundsToShow as $bgFile) {
            echo '
            <label class="background-option text-center">
                <input type="radio" name="background" value="'.$bgFile.'" required class="d-none" '.($page['background'] == $bgFile ? 'checked' : '').'>
                <img src="'.$backgroundDir.$bgFile.'" alt="'.$bgFile.'" class="background-thumbnail">
            </label>';
        }
        ?>
    </div>
</div>


<style>
    .background-selection {
        display: flex;
        gap: 15px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .background-option {
        cursor: pointer;
        border: 2px solid transparent;
        padding: 5px;
        border-radius: 10px;
        transition: all 0.3s ease-in-out;
    }
    .background-option img {
        width: 150px; /* Adjust size as needed */
        height: auto;
        border-radius: 5px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }
    .background-option:hover {
        border: 2px solid #007bff;
    }
    input[type="radio"]:checked + img {
        border: 3px solid #007bff;
    }
</style>


<div class="mb-3">
    <label class="form-label">Optional: Select a Mockup Image</label>

    <?php if (!empty($page['mockup_filename'])): ?>
        <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" name="remove_mockup" id="remove_mockup" value="1">
            <label class="form-check-label" for="remove_mockup">Remove selected mockup</label>
        </div>
    <?php endif; ?>

<!-- ✅ Use centralized loader -->
<div id="mockupGrid" class="row mb-3"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    fetch('load-mockup-grid.php?saved=<?php echo urlencode($page['mockup_filename'] ?? ''); ?>')
        .then(res => res.text())
        .then(html => {
            document.getElementById('mockupGrid').innerHTML = html;
        });
});
</script>

</div>


<style>
.mockup-thumb {
    border: 3px solid transparent;
    border-radius: 10px;
    transition: border-color 0.3s ease;
    cursor: pointer;
    width: 100%;
    height: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
input[type="radio"].btn-check:checked + label .mockup-thumb {
    border-color: #28a745; /* Green border when selected */
}
.mockup-label {
    display: inline-block;
    cursor: pointer;
}
</style>


<!-- ✅ Call-to-Action Button Style Selector -->
<div class="mb-4">
    <label class="form-label">Choose Your Call-to-Action Button</label>
    <div class="d-flex flex-wrap gap-3 justify-content-center">
        <?php
$cta_options = [
    "fa-rocket YES, LET ME IN!",
    "fa-paper-plane SEND ME THE SYSTEM",
    "fa-bolt UNLOCK INSTANT ACCESS",
    "fa-magic SHOW ME HOW IT WORKS",
    "fa-gift CLAIM MY FREE SYSTEM",
    "fa-check START MY SETUP",
    "fa-play LET US GO!",
    "fa-lightbulb REVEAL THE METHOD",
    "fa-fire IGNITE MY FUNNEL",
    "fa-user-plus JOIN FOR FREE",
    "fa-forward I AM READY TO START",
    "fa-arrow-circle-right NEXT STEP, PLEASE"
];

        $savedCTA = $page['cta_text'] ?? '';
        foreach ($cta_options as $option) {
            list($icon, $text) = explode(' ', $option, 2);
            $btnPreview = "<i class='fa $icon me-2'></i>$text";
            $checked = ($option === $savedCTA) ? 'checked' : '';
            echo "
            <label class='btn btn-outline-primary d-flex align-items-center' style='padding: 10px; gap: 10px; border-radius: 8px;'>
                <input type='radio' name='cta_text' value='$option' class='d-none' $checked>
                <span>$btnPreview</span>
            </label>";
        }
        ?>
    </div>
</div>

<style>
    input[name="cta_text"]:checked + span {
        font-weight: bold;
        color: #198754;
    }

    label.btn input[type="radio"]:checked + span {
        color: #fff !important;
        background-color: #198754 !important;
        padding: 6px 12px;
        border-radius: 6px;
    }
</style>


            <!-- ✅ Color Theme -->
<!-- ✅ Modern Color Selection -->
<div class="mb-3">
    <label class="form-label">Choose Theme Color</label>
    <div class="color-selection d-flex flex-wrap gap-3 justify-content-center">
        <?php
        $colors = [
            "blue" => "#007bff",
            "green" => "#28a745",
            "orange" => "#fd7e14",
            "purple" => "#6f42c1",
            "red" => "#dc3545",
            "teal" => "#20c997",
            "yellow" => "#ffc107",
            "pink" => "#e83e8c",
            "gray" => "#6c757d"
        ];

        foreach ($colors as $colorName => $hex) {
            echo '
            <label class="color-option">
                <input type="radio" name="color_theme" value="'.$colorName.'" class="d-none" '.($savedColor === $colorName ? 'checked' : '').'>
                <span class="color-circle" style="background-color: '.$hex.';"></span>
            </label>';
        }
        ?>
    </div>
</div>




            <button type="submit" class="btn btn-success">Save Changes</button>
        </form>
    </div>
</div>

<?php include 'footer.php'; ?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

   <script>
function toggleSidebar() {
  const sidebar = document.querySelector('.sidebar');
  const overlay = document.querySelector('.sidebar-overlay');
  const toggleBtn = document.querySelector('.sidebar-toggle-btn');

  sidebar.classList.toggle('open');
  overlay.classList.toggle('show');
  document.body.classList.toggle('sidebar-opened');

  // Optional: toggle button visibility while sidebar is open
  if (document.body.classList.contains('sidebar-opened')) {
    toggleBtn.style.display = 'none';
  } else {
    toggleBtn.style.display = 'block';
  }
}

// ✅ Hide sidebar if top navbar is toggled (on mobile)
document.querySelector('.navbar-toggler')?.addEventListener('click', function () {
  document.querySelector('.sidebar')?.classList.remove('open');
  document.querySelector('.sidebar-overlay')?.classList.remove('show');
  document.body.classList.remove('sidebar-opened');
});
</script>

<script>
$(document).ready(function() {
$('#subheadline-editor').trumbowyg({
    btns: [
        ['strong', 'em', 'underline'],
        ['foreColor', 'backColor'],
        ['emoji'],
        ['justifyLeft', 'justifyCenter', 'justifyRight'],
        ['removeformat'],
        ['viewHTML']
    ],
    plugins: {
        colors: {
            colorList: [
                '000000', '444444', '666666', '999999', 'cccccc', 'eeeeee', 'ffffff',
                'f44336', 'e91e63', '9c27b0', '673ab7', '3f51b5', '2196f3', '03a9f4',
                '00bcd4', '009688', '4caf50', '8bc34a', 'cddc39', 'ffeb3b', 'ffc107',
                'ff9800', 'ff5722'
            ]
        }
    },
    autogrow: true,
    removeformatPasted: false,
    semantic: false
});
});
</script>

<!-- 🧠 Snippet Modal -->
<div class="modal fade" id="snippetModal" tabindex="-1" aria-labelledby="snippetModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header bg-dark text-white">
        <h5 class="modal-title" id="snippetModalLabel">📋 Subheadline Snippet Library</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row row-cols-1 row-cols-md-2 g-3">
          <!-- ✨ Snippet Buttons -->
          <!-- We will fill this with JS below -->
        </div>
      </div>
    </div>
  </div>
</div>
<script>
let snippets = [];

fetch('assets/data/snippets.json')
  .then(response => response.json())
  .then(data => {
    snippets = data;
    const container = $('#snippetModal .modal-body .row');
    snippets.forEach((item, index) => {
      const preview = $(
        `<div class="col"><button type="button" class="btn btn-light w-100 text-start border insert-snippet" data-index="${index}">${item.html}</button></div>`
      );
      container.append(preview);
    });
  });

$(document).on('click', '.insert-snippet', function () {
  const html = snippets[$(this).data('index')].html;
  $('#subheadline-editor').trumbowyg('html', html);
  const modal = bootstrap.Modal.getInstance(document.getElementById('snippetModal'));
  modal.hide();
});



// Build and insert snippet buttons
$(function () {
    const container = $('#snippetModal .modal-body .row');
    snippets.forEach((html, index) => {
        const preview = $('<div class="col"><button type="button" class="btn btn-light w-100 text-start border insert-snippet" data-index="' + index + '">' + html + '</button></div>');
        container.append(preview);
    });

    $(document).on('click', '.insert-snippet', function () {
        const html = snippets[$(this).data('index')].html;
        $('#subheadline-editor').trumbowyg('html', html);
        const modal = bootstrap.Modal.getInstance(document.getElementById('snippetModal'));
        modal.hide();
    });
});
</script>


<!-- 🖼️ Mockup Insert Modal -->
<div class="modal fade" id="mockupInsertModal" tabindex="-1" aria-labelledby="mockupInsertModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header bg-dark text-white">
        <h5 class="modal-title" id="mockupInsertModalLabel">🖼️ Choose a Mockup to Insert</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row" id="mockupInsertGrid"></div>
      </div>
    </div>
  </div>
</div>
<script>
function loadMockupInsertGrid() {
    fetch('load-mockup-grid.php?mode=insert')
        .then(res => res.text())
        .then(html => {
            document.getElementById('mockupInsertGrid').innerHTML = html;

            // Make mockups clickable
            document.querySelectorAll('#mockupInsertGrid img').forEach(img => {
                img.style.cursor = 'pointer';
                img.onclick = function () {
                    const src = img.getAttribute('src');
                    const html = `<p><img src="${src}" style="max-width:100%; height:auto; display:block; margin:0 auto; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.2);"></p>`;
                    $('#subheadline-editor').trumbowyg('execCmd', {
                        cmd: 'insertHTML',
                        param: html
                    });
                    const modal = bootstrap.Modal.getInstance(document.getElementById('mockupInsertModal'));
                    modal.hide();
                };
            });
        });
}

document.getElementById('mockupInsertModal').addEventListener('show.bs.modal', loadMockupInsertGrid);
</script>


</body>
</html>
