// ===============================
// Select Form Elements
// ===============================
const dataInput = document.querySelector("input[name='data']");
const fillColorInput = document.querySelector("input[name='fill_color']");
const backColorInput = document.querySelector("input[name='back_color']");
const sizeSelect = document.querySelector("select[name='size']");
const logoInput = document.querySelector("input[name='logo']");
const form = document.querySelector("form");

// ===============================
// Create QR Preview Container
// ===============================
const previewContainer = document.createElement("div");
previewContainer.style.marginTop = "20px";
previewContainer.style.textAlign = "center";

const previewTitle = document.createElement("h3");
previewTitle.innerText = "Live QR Preview";
previewTitle.style.marginBottom = "10px";

const previewImg = document.createElement("img");
previewImg.style.maxWidth = "200px";
previewImg.style.border = "1px solid #ddd";
previewImg.style.padding = "10px";
previewImg.style.borderRadius = "10px";

previewContainer.appendChild(previewTitle);
previewContainer.appendChild(previewImg);
form.appendChild(previewContainer);

// ===============================
// Generate Live QR Preview
// ===============================
function generatePreview() {
    const data = dataInput.value.trim();
    const fillColor = fillColorInput.value;
    const backColor = backColorInput.value;
    const size = parseInt(sizeSelect.value);

    if (data === "") {
        previewImg.src = "";
        return;
    }

    const qrSize = size * 25;

    previewImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=${qrSize}x${qrSize}&data=${encodeURIComponent(data)}&color=${fillColor.replace('#', '')}&bgcolor=${backColor.replace('#', '')}`;
}

// ===============================
// Event Listeners for Live Update
// ===============================
dataInput.addEventListener("input", generatePreview);
fillColorInput.addEventListener("input", generatePreview);
backColorInput.addEventListener("input", generatePreview);
sizeSelect.addEventListener("change", generatePreview);

// ===============================
// Logo Upload Handling
// ===============================
// (Logo will be embedded in backend only)
logoInput.addEventListener("change", function () {
    generatePreview(); // Keep QR preview intact
});

// ===============================
// Simple Form Validation
// ===============================
form.addEventListener("submit", function (e) {
    if (dataInput.value.trim() === "") {
        e.preventDefault();
        alert("Please enter Asset ID or text!");
        dataInput.focus();
    }
});