<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="css/main/main.css?ver=<?php echo time(); ?>">
    <script src="js/main/main.js?ver=<?php echo time(); ?>" defer></script>
    <style>
        .copy-btn {
            padding: 8px 16px;
            margin-left: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }

        .copy-btn:hover {
            background-color: #45a049;
        }

        .copy-msg {
            font-size: 14px;
            color: green;
            display: none;
            margin-top: 5px;
        }
    </style>
</head>
<body>

    <!-- Left Panel (Navigation) -->
    <div class="left-panel left-panel-show" id="left-panel">
    </div>

    <!-- Main Content Area -->
    <div class="main-content main-content-normal" id="main-content">

        <!-- Content Area (Dynamic Content Based on the selected menu) -->
        <div id="content">
            <!-- Webhook URL will be inserted here -->
        </div>
    </div>

    <script>
        // Assuming the base URL for your site is dynamically generated
        // This will insert the webhook URL into the content div
        document.addEventListener("DOMContentLoaded", function() {
            const baseUrl = window.location.origin;  // Get the base domain URL
            const webhookUrl = `${baseUrl}/woocommerce/receive.php`;  // Append the webhook path
            const contentDiv = document.getElementById("content");

            // Set the content of the div to display the webhook URL and the Copy button
            contentDiv.innerHTML = `
                <p>Webhook URL: <a href="${webhookUrl}" target="_blank">${webhookUrl}</a>
                <button class="copy-btn" id="copyBtn">Copy</button></p>
                <div class="copy-msg" id="copyMsg">URL copied to clipboard!</div>
            `;

            // Add click event listener to the copy button
            const copyBtn = document.getElementById("copyBtn");
            const copyMsg = document.getElementById("copyMsg");

            copyBtn.addEventListener("click", function() {
                // Use the Clipboard API to copy the webhook URL
                navigator.clipboard.writeText(webhookUrl).then(function() {
                    // Show the success message
                    copyMsg.style.display = "block";
                    // Hide the success message after 2 seconds
                    setTimeout(function() {
                        copyMsg.style.display = "none";
                    }, 2000);
                }).catch(function(error) {
                    console.error("Error copying text: ", error);
                });
            });
        });
    </script>

</body>
</html>
