document.getElementById("otpForm").addEventListener("submit", async function(event) {
    event.preventDefault();
    
    // Capture form values
    const isd_code = document.getElementById("isd_code").value;
    const phone = document.getElementById("phone").value;
    const tenant_id = document.getElementById("tenant_id").value;
    const product_id = document.getElementById("product_id").value;

    // Construct API payload
    const payload = {
        isd_code: isd_code,
        phone: phone,
        tenant_id: parseInt(tenant_id),
        product_id: parseInt(product_id)
    };

    try {
        // Send POST request to the API
        const response = await fetch("https://otp.infinitylearn.com/api/getGatewayOtp", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(payload)
        });

        // Parse JSON response
        const data = await response.json();
        
        // Display the response in the preformatted section
        document.getElementById("response").textContent = JSON.stringify(data, null, 2);
    } catch (error) {
        document.getElementById("response").textContent = "Error: " + error.message;
    }
});