// =======================
// CONFIGURATION
// =======================
const WEBHOOK_URL = "https://your-webhook-url.com"; // <-- Set your webhook here

// =======================
// HELPER FUNCTIONS
// =======================

// Create the modal form HTML
function createModal() {
    const modal = document.createElement("div");
    modal.id = "buyNowModal";
    modal.style.position = "fixed";
    modal.style.top = "0";
    modal.style.left = "0";
    modal.style.width = "100%";
    modal.style.height = "100%";
    modal.style.backgroundColor = "rgba(0,0,0,0.5)";
    modal.style.display = "none";
    modal.style.justifyContent = "center";
    modal.style.alignItems = "center";
    modal.style.zIndex = "1000";

    modal.innerHTML = `
        <div style="background: #fff; padding: 20px; border-radius: 8px; max-width: 400px; width: 90%; position: relative;">
            <span id="closeModal" style="position: absolute; top: 10px; right: 15px; cursor: pointer; font-weight: bold;">&times;</span>
            <h2>Buy Product</h2>
            <form id="buyForm">
                <label>Name:<br><input type="text" name="name" required></label><br><br>
                <label>Company:<br><input type="text" name="company" required></label><br><br>
                <label>Country:<br><input type="text" name="country" required></label><br><br>
                <label>Street:<br><input type="text" name="street" required></label><br><br>
                <label>ZIP:<br><input type="text" name="zip" required></label><br><br>
                <label>Town:<br><input type="text" name="town" required></label><br><br>
                <label>Email:<br><input type="email" name="email" required></label><br><br>
                <label>Product:<br><input type="text" name="product" readonly></label><br><br>
                <button type="submit">Submit</button>
            </form>
        </div>
    `;

    document.body.appendChild(modal);

    // Close button
    document.getElementById("closeModal").onclick = () => {
        modal.style.display = "none";
    };

    // Close modal on outside click
    modal.onclick = (e) => {
        if (e.target === modal) modal.style.display = "none";
    };

    return modal;
}

// Show modal and set product
function openModal(productHref) {
    const modal = document.getElementById("buyNowModal");
    modal.style.display = "flex";
    modal.querySelector('input[name="product"]').value = productHref;
}

// Handle form submission
function handleFormSubmit() {
    const form = document.getElementById("buyForm");
    form.addEventListener("submit", async (e) => {
        e.preventDefault();
        const data = {};
        new FormData(form).forEach((value, key) => (data[key] = value));

        try {
            const res = await fetch(WEBHOOK_URL, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(data)
            });

            if (res.ok) {
                alert("Form submitted successfully!");
                form.reset();
                document.getElementById("buyNowModal").style.display = "none";
            } else {
                alert("Failed to submit form.");
            }
        } catch (err) {
            console.error(err);
            alert("Error submitting form.");
        }
    });
}

// Attach modal to buttons
function attachButtons() {
    const buttons = Array.from(document.querySelectorAll("button, a"));
    buttons.forEach(btn => {
        if (btn.textContent.trim() === "Buy Now") {
            btn.addEventListener("click", (e) => {
                e.preventDefault();
                const href = btn.getAttribute("href") || btn.dataset.product || "Unknown Product";
                openModal(href);
            });
        }
    });
}

// =======================
// INIT
// =======================
document.addEventListener("DOMContentLoaded", () => {
    createModal();
    handleFormSubmit();
    attachButtons();
});